iframe跨域传值,前端postMessage和addEventListener踩坑
iframe跨域传值,前端postMessage和addEventListener踩坑详细介绍
本文目录一览: 油猴怎么跨域复制
油猴在页面跨域复制。通过页面传值给iframe,借助油猴在iframe里面操作,获得数据后使用Windows.name传数据到页面。
ifame如何传递参数给form表单
用页面上的js传值吧,iframe调用父页面的js函数进行传值,window.parent.函数名。但是必须保证你的iframe没有跨域。
前端postMessage和addEventListener踩坑
目标功能:
页面一跨域open页面二,页面二通过addEventListener监听到消息后,返回确认信息。页面一通过addEventListener监听页面二发送的确认信息后,将数据包发送给页面二。页面二获取数据包后进行处理。
postMessage简介(摘抄自他人博客,如涉抄袭,请联系我):
HTML5提出了一个新的用来跨域传值的方法,即postMessage。我们假设有两个网站,1.com与2.com,我在1.com的页面上通过iframe或window.open或超链接打开了一个2.com的网页,此时我要在2.com上做操作的时候,给1.com传值,让1.com有所变化。这个过程就是个跨域的过程。
如果你对window.open熟,你就会知道通过window.open打开的网页(我们称之为子网页),可以通过window.opener对象,访问到把它打开的页面(父网页),这样一来,调用父页面的函数就是非常简单的事了。但是,在跨域的条件下,window.opener就成了一个空对象,“没有权限”,浏览器会这么告诉你。
比如,你的父页面有个函数叫callback,然后你子页面本可以这样调用:window.opener.callback(),同域时能成功,跨域时就没有权限了。但是,此时你调用window.opener.postMessage(),却可以成功!
postMessage参数:postMessage(message, targetOrigin, [transfer])
message:
将要发送到其他 window的数据。它将会被结构化克隆算法序列化。这意味着你可以不受什么限制的将数据对象安全的传送给目标窗口而无需自己序列化。
message的三个属性:
data : 从其他 window 中传递过来的对象。
origin : 调用 postMessage 时消息发送方窗口的 origin . 这个字符串由 协议、“://“、域名、“ : 端口号”拼接而成。例如 “ https://example.org (implying port 443)”、“ http://example.net (implying port 80)”、“ http://example.com:8080 ”。请注意,这个origin不能保证是该窗口的当前或未来origin,因为postMessage被调用后可能被导航到不同的位置。
source :对发送消息的窗口对象的引用; 您可以使用此来在具有不同origin的两个窗口之间建立双向通信。
targetOrigin:
通过窗口的origin属性来指定哪些窗口能接收到消息事件,其值可以是字符串”“(表示无限制)或者一个URI。在发送消息的时候,如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配targetOrigin提供的值,那么消息就不会被发送;只有三者完全匹配,消息才会被发送。这个机制用来控制消息可以发送到哪些窗口;例如,当用postMessage传送密码时,这个参数就显得尤为重要,必须保证它的值与这条包含密码的信息的预期接受者的orign属性完全一致,来防止密码被恶意的第三方截获。如果你明确的知道消息应该发送到哪个窗口,那么请始终提供一个有确切值的targetOrigin,而不是。不提供确切的目标将导致数据泄露到任何对数据感兴趣的恶意站点。
transfer (可选参数)
是一串和message 同时传递的 Transferable 对象. 这些对象的所有权将被转移给消息的接收方,而发送一方将不再保有所有权。
例程:google和百度进行通信
页面一
页面二
页面一
由此页面一二可进行数据的通信
addEventListener简介:addEventListener() 方法用于向指定元素添加事件句柄。
addEventListener三个参数:
element .addEventListener( event , function , useCapture )
参数描述
{
event( 必须):字符串,指定事件名。
注意: 不要使用 "on" 前缀。 例如,使用 "click" ,而不是使用 "onclick"。
提示: 所有 HTML DOM 事件,可以查看我们完整的 https://www.runoob.com/jsref/dom-obj-event.html 。
function( 必须):指定要事件触发时执行的函数。
当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如, "click" 事件属于 MouseEvent(鼠标事件) 对象。
useCapture( 可选):布尔值,指定事件是否在捕获或冒泡阶段执行。
可能值:
true - 事件句柄在捕获阶段执行
false- false- 默认。事件句柄在冒泡阶段执行
}
例程:
addEventListener后需要remove以防止占用过多内存
removeEventListener时必须和addEvent的时指向同一个对象!
以下情况会生成不同的对象,导致remove失效
「
1、window.addEventListener('message', (e) => {})多次调用会多次生成不同的匿名函数e,应指向同一个命名函数
2、window.addEventListener('message', this.handler.bind(this)),命名函数绑定this后,调用会生成不同的对象
」
跨域请求是什么?
问题一:跨域是指什么,因为什么引起的?有哪些解决方案?web前端知识 跨域是指 不同域名之间相互访问 例如 我的电脑上有2个服务器 192.168.0.11 192.168.0.12 如果第一个服务器上的页面要访问第二个服务器 就叫做跨域 或者baidu 要访问xxx 也是不同域名 也是跨域
HTML5 里有个window.postMessage 方法,支持跨域访问,详情可以参考
webhek/window-postmessage-api
如果你的程序在服务器上,也可以进行相应的操作来完成跨域访问
纯手打 有问题欢迎咨询
问题二:什么叫做跨域访问,求大神解答 如果在A网站中,我们希望使用Ajax来获得B网站中的特定内容
如果A网站与B网站不在同一个域中,那么就出现了跨域访问问题
Ajax的跨域访问问题是现有的Ajax开发人员比较常遇到的问题
一般都会用jsoncallback方法来解决
你可以理解为两个域名之间不能跨过域名来发送请求或者请求数据,否则就是不安全的
希望能帮助到你
问题三:什么是AJAX跨域请求 假设你有两个站点a和b
在a中用ajax向b发送请求,这就是跨域请求了。
问题四:什么是跨域访问 跨域访问就是你在一个域环境下阀访问另一个域的内容。
跨域访问前提是彼此相互信任,不然是没法访问的。
问题五:什么是JS跨域访问 ajax或者iframe指向的地址中,二级域名、端口、协议必须与主页面完全相同,否则就算跨域
比如
a.baidu访问b.baidu 是跨域;
a.baidu:8080访问a.baidu:80 是跨域;
a.baidu访问a.baidu 是跨域
ajax跨域,两种办法:后端写个代理接口,让后端去抓数据;或者与对方合作,用jsonp等方式传送数据
iframe跨域问题有点多,必须要得到iframe内部页面的配合才可能通信,方法也比较多:
1,假写hash值通信,父子页面各自建立轮询去检测iframe中url的hash值,通过值来通信
2,利用HTML5的postMessage,不过注意这个也是异步的
3,利用IE6\7中对navigator的bug,我前同事发现的,在ie6/7中,父子页面使用的window.navigator是同一个东西,父页面改了,子页面也会跟着变;
4,iframe中嵌套一层与顶层页面同域的页面,比如a中套b,b中套c,其中a、c同域,b做出改变后通过url给c传值,c中操作top对象也就是a,由于同域,所以不会有问题
问题六:$跨域请求怎么解决 post请求进行跨域
angularjs内置封装了类ajax的网络服务$,所以实现了依赖外部插件来完成完整的前后端分离方案
$scope.main = {
getData: function () {
$({
method: 'POST',
url: 'localhost:8000',
headers: {
'Content-Type' : 'application/x--form-urlencoded'
},
data: {
myUrl: 'c.m.163/...0'
}
}).then(function success(result) {
数据请求成功
console.log(result.data);
},function error(err) {
数据请求失败
console.log(err);
});
}
};
注意:表面上是向$中传入了一个回调函数提供相应时调用,实际是返回了一个promise对象,angular1.2以上的版本对$进行了优化
优化后:
$scope.main = {
getData: function () {
var myUrl = 'c.m.163/...0';
var url = 'localhost:8000';
var promise = $({
method: 'POST',
url: url,
headers: {
'Content-Type' : 'text/plain'
......>>
问题七:xmlrequest 跨域请求是什么意思 跨域请求,顾名思义,就是一个站点中的资源去访问另外一个不同域名站点上的资源。这种情况很常见,比如说通过 style. 标签加载外部样式表文件、通过 img 标签加载外部图片、通过 script. 标签加载外部脚本文件、通过 Webfont 加载字体文件等等。默认情况下,脚本访问文档属性等数据采用的是同源策略(Same origin policy)。
那么,什么是同源策略呢?如果两个页面的协议、域名和端口是完全相同的,那么它们就是同源的。同源策略是为了防止从一个地址加载的文档或脚本访问或者设置从另外一个地址加载的文档的属性。如果两个页面的主域名相同,则还可以通过设置 document.domain 属性将它们认为是同源的。
问题八:什么是JS跨域请求?有几种方式可以实现 通俗就是 你自己的网站请求别人别人网站上的数据。 跨域 方法有好多 后台可以跨域 script 标签可以跨域 jsonp 可以跨域 多度娘
问题九:ajax跨域到底是什么意思?能否举个简单例子说明一下? Ajax请求一个目标地址为非本域(协议、域名、端口任意一个不同)的web资源,并根据响应获得外部应用数据。比如我们用Ajax访问城市天气预报、IP地址等公共服务接口时,就涉及跨域了。我们请求一个外部服务时,浏览器会基于安全问题拒绝授权访问。而script、script、iframe标签的src属性就不存在跨域的问题,所以Ajax跨域就是利用这一点以及js对JSON的支持,外部服务只要给Ajax的请求响应一段JS代码或JSON数据,就能被Ajax获取到。
比如jquery的getScript
$.getScript(pv.sohu/cityjson,function(){前面加上 这个服务给响应的js代码为 returnCitySN = {cid: 110000, cip: 124.xxx.22.xxx, ame: 北京市} 回调函数执行前,外部服务给响应的js代码已被加载到本地,所以可以直接使用。 console.log(cid : + returnCitySN.cid); console.log(cip : + returnCitySN.cip); console.log(ame : + returnCitySName);});
问题十:html跨域请求怎么写? JSONP
proxy代理cors
xdr
由于浏览器同源策略,凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。
什么叫跨域访问
问题一:什么叫做跨域访问,求大神解答 如果在A网站中,我们希望使用Ajax来获得B网站中的特定内容
如果A网站与B网站不在同一个域中,那么就出现了跨域访问问题
Ajax的跨域访问问题是现有的Ajax开发人员比较常遇到的问题
一般都会用jsoncallback方法来解决
你可以理解为两个域名之间不能跨过域名来发送请求或者请求数据,否则就是不安全的
希望能帮助到你
问题二:什么是跨域访问 跨域访问就是你在一个域环境下阀访问另一个域的内容。
跨域访问前提是彼此相互信任,不然是没法访问的。
问题三:什么是JS跨域访问 ajax或者iframe指向的地址中,二级域名、端口、协议必须与主页面完全相同,否则就算跨域
比如
a.baidu访问b.baidu 是跨域;
a.baidu:8080访问a.baidu:80 是跨域;
a.baidu访问a.baidu 是跨域
ajax跨域,两种办法:后端写个代理接口,让后端去抓数据;或者与对方合作,用jsonp等方式传送数据
iframe跨域问题有点多,必须要得到iframe内部页面的配合才可能通信,方法也比较多:
1,假写hash值通信,父子页面各自建立轮询去检测iframe中url的hash值,通过值来通信
2,利用HTML5的postMessage,不过注意这个也是异步的
3,利用IE6\7中对navigator的bug,我前同事发现的,在ie6/7中,父子页面使用的window.navigator是同一个东西,父页面改了,子页面也会跟着变;
4,iframe中嵌套一层与顶层页面同域的页面,比如a中套b,b中套c,其中a、c同域,b做出改变后通过url给c传值,c中操作top对象也就是a,由于同域,所以不会有问题
问题四:请描述下对跨域访问的理解?跨域有几种实现方式 通俗就是 你自己的网站请求别人别人网站上的数据。 跨域 方法有好多 后台可以跨域 script 标签可以跨域 jsonp 可以跨域 多度娘
问题五:什么是跨域访问?ajax如何实现跨域 jsonp可以传递get不可传递post,目前跨域只能是jsonp方式,虽然楼上说的都有理,但是归根到底还是没有解决 远程发送post数据到服务器的问题,目前我也没有找到合适的办法,不过如果客户端执行WEB脚本的话,在后台是可以发送post的,假如只是静态,目前没有别的办法
能做的只能尽量简化传输数据大小,采用jsonp的get方式。
IE9、Chrome、FF、Opera支持ResponseHeader Access-Control-Allow-Origin
IE下得额外配置:
jQuery.support.cors = true; (启用读取上面那个头信息的功能)
点击IE浏览器的的“工具->Internet 选项->安全->自定义级别”将“其他”选项中的“通过域访问数据源”选中为“启用”或者“提示”,点击确定就可以了。(自身的过滤)
问题六:为什么有人说ajax不能跨域是什么意思 不是可以通过ajax跨域访问吗 嗯,就是说啊,ajax只能在自己的域下访问,比如在腾讯里面写的AJAX 是不能去访问百度里面的东西的,这就是跨域的!使用AJAX是需要服务器环境的,目前只有火狐浏览器不需要搭建环境,即可直接使用AJAX操作!
问题七:jquery ajax的跨域访问 是什么意思 跨域访问 就是指在A网站中通过ajax来获取B网站中的内容,如果A、B两个网站不在同一个域中,那么就出现了跨域访问问题
你可以理解为两个域名之间不能跨过域名来发送请求或者请求数据,否则就是不安全的
问题八:什么叫ajax跨域访问 就是post,get的url不是你自伐的网站,域名不同。这种方法一般不可以实现。但是 的方法可以
问题九:ajax中跨域访问是什么意思 就是$.ajax({
url:'other.domain/file.php', 这里请求的是别的站点阀数据,不是你本地的站点
....
});
问题十:什么是javascript跨域访问 JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。这里把涉及到跨域的一些问题简单地整理一下:
首先什么是跨域,简单地理解就是因为JavaScript同源策略的限制,a 域名下的js无法操作b或是c.a域名下的对象。更详细的说明可以看下表:
特别注意两点:
第一,如果是协议和端口造成的跨域问题“前台”是无能为力的,
第二:在跨域问题上,域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。“URL的首部”指window.location.protocol +window.location.host,也可以理解为“Domains, protocols and ports must match”。
跨域是什么意思
问题一:跨域是指什么,因为什么引起的?有哪些解决方案?web前端知识 跨域是指 不同域名之间相互访问 例如 我的电脑上有2个服务器 192.168.0.11 192.168.0.12 如果第一个服务器上的页面要访问第二个服务器 就叫做跨域 或者baidu 要访问xxx 也是不同域名 也是跨域
HTML5 里有个window.postMessage 方法,支持跨域访问,详情可以参考
webhek/window-postmessage-api
如果你的程序在服务器上,也可以进行相应的操作来完成跨域访问
纯手打 有问题欢迎咨询
问题二:ajax跨域和不跨域有什么区别 跨域的优势是能充分利用分布式集群系统,使某些服务压力可以分散到多台服务器上。但数据交互的安全性上有一定影响。
不跨域的优势是前台页面和后台服务都在一个服务器下,安全性高,但但不能分摊负载。
目前计算机行业正在向高集成,多并发,低耦合的方向发展。
所有基础服务以接口的方式提供是很好的一种方案(像百度地图,微信,支付宝都有服务接口),基础服务和中间件之间的交互也可能采用服务调用的方式,这些问题就牵扯到跨域,处理好跨域和安全的平衡点是这类集成系统的需要重点权衡的方面之一。
问题三:网页中跨域什么意思 简单比喻一下就是跨了两个域名,比如腾讯域名下的网页 去访问 百度下的网页了 ,跨域访问
问题四:什么是跨域访问 跨域访问就是你在一个域环境下阀访问另一个域的内容。
跨域访问前提是彼此相互信任,不然是没法访问的。
问题五:ajax跨域到底是什么意思?能否举个简单例子说明一下? Ajax请求一个目标地址为非本域(协议、域名、端口任意一个不同)的web资源,并根据响应获得外部应用数据。比如我们用Ajax访问城市天气预报、IP地址等公共服务接口时,就涉及跨域了。我们请求一个外部服务时,浏览器会基于安全问题拒绝授权访问。而script、script、iframe标签的src属性就不存在跨域的问题,所以Ajax跨域就是利用这一点以及js对JSON的支持,外部服务只要给Ajax的请求响应一段JS代码或JSON数据,就能被Ajax获取到。
比如jquery的getScript
$.getScript(pv.sohu/cityjson,function(){前面加上 这个服务给响应的js代码为 returnCitySN = {cid: 110000, cip: 124.xxx.22.xxx, ame: 北京市} 回调函数执行前,外部服务给响应的js代码已被加载到本地,所以可以直接使用。 console.log(cid : + returnCitySN.cid); console.log(cip : + returnCitySN.cip); console.log(ame : + returnCitySName);});
问题六:为什么有人说ajax不能跨域是什么意思 不是可以通过ajax跨域访问吗 嗯,就是说啊,ajax只能在自己的域下访问,比如在腾讯里面写的AJAX 是不能去访问百度里面的东西的,这就是跨域的!使用AJAX是需要服务器环境的,目前只有火狐浏览器不需要搭建环境,即可直接使用AJAX操作!
问题七:什么叫做跨域访问,求大神解答 如果在A网站中,我们希望使用Ajax来获得B网站中的特定内容
如果A网站与B网站不在同一个域中,那么就出现了跨域访问问题
Ajax的跨域访问问题是现有的Ajax开发人员比较常遇到的问题
一般都会用jsoncallback方法来解决
你可以理解为两个域名之间不能跨过域名来发送请求或者请求数据,否则就是不安全的
希望能帮助到你
问题八:js中domain跨域是什么意思 你可以参考cors机制,还有p3p协议。具体什么内容和代码过程我忘了,如果你需要具体过程,请追问,我帮你查查书。
问题九:什么是JS跨域访问 ajax或者iframe指向的地址中,二级域名、端口、协议必须与主页面完全相同,否则就算跨域
比如
a.baidu访问b.baidu 是跨域;
a.baidu:8080访问a.baidu:80 是跨域;
a.baidu访问a.baidu 是跨域
ajax跨域,两种办法:后端写个代理接口,让后端去抓数据;或者与对方合作,用jsonp等方式传送数据
iframe跨域问题有点多,必须要得到iframe内部页面的配合才可能通信,方法也比较多:
1,假写hash值通信,父子页面各自建立轮询去检测iframe中url的hash值,通过值来通信
2,利用HTML5的postMessage,不过注意这个也是异步的
3,利用IE6\7中对navigator的bug,我前同事发现的,在ie6/7中,父子页面使用的window.navigator是同一个东西,父页面改了,子页面也会跟着变;
4,iframe中嵌套一层与顶层页面同域的页面,比如a中套b,b中套c,其中a、c同域,b做出改变后通过url给c传值,c中操作top对象也就是a,由于同域,所以不会有问题
问题十:javascript开发中jsonp跨域请求是什么意思?什么叫跨域?为什么用jsonp? 跨域是JavaScript出于安全方面的考虑,不允许浏览器在当前访问的域名的页面中的javascript的调用其他域名页面中的对象。
跨域请求就是为了解决禁止跨域访问的问题。
用jsonp的原因是json是javascript中的对象,而跨域访问中有图片、css、javascript脚本文件等是不限制,因此你可以在页面渲染时动态在标签设置src路径,而这个路径返 *** 来的就是json对象。
表单值如何提交到父页面
父页面表单值调用iframe页面表单值
一般都是不跨域的,最多也就是一个父域下的多个子域间可以会话,纯粹跨域只能ajax
异步传输的。iframe没的搞,不过
原理是
用一个值记录下帖子的地址
然后传递到登陆界面,这个界面用隐藏域
然后登陆成功后转到先前记录下来的地址就可以了
你可以参数传值
然侯设置跳转页面 楼上说的梯队的
用session记录 或存储 地址 然后获取参数
就 OK啦
Request.ServerVariables("HTTP_Referer")
作用:返回网页导向之前的原始网页。
看帖的时候跳到登录页,登录成功后,直接 response.Redirect(Request.ServerVariables("HTTP_Referer"))试一试
你可以session记录下这个帖子的地址,登陆完从session里取出跳转回去。
如果能取得本页完整的URL,包插问号后面的参数,应该就好办了吧?
如果是这样,那就有办法
什么是JS跨域访问
ajax或者iframe指向的地址中,二级域名、端口、协议必须与主页面完全相同,否则就算跨域
比如
a.baidu.com访问b.baidu.com 是跨域;
a.baidu.com:8080访问a.baidu.com:80 是跨域;
http://a.baidu.com访问https://a.baidu.com 是跨域
ajax跨域,两种办法:后端写个代理接口,让后端去抓数据;或者与对方合作,用jsonp等方式传送数据
iframe跨域问题有点多,必须要得到iframe内部页面的配合才可能通信,方法也比较多:
1,假写hash值通信,父子页面各自建立轮询去检测iframe中url的hash值,通过值来通信
2,利用HTML5的postMessage,不过注意这个也是异步的
3,利用IE6\7中对navigator的bug,我前同事发现的,在ie6/7中,父子页面使用的window.navigator是同一个东西,父页面改了,子页面也会跟着变;
4,iframe中嵌套一层与顶层页面同域的页面,比如a中套b,b中套c,其中a、c同域,b做出改变后通过url给c传值,c中操作top对象也就是a,由于同域,所以不会有问题
js中location.reload可以跨页面传值么?
如果这个iframe页面是同域名的,那么可以通过parent对象来处理。
子页面获取父页面的dom元素
window.parent.document.getElementById('父页面元素id值');
如果是不同域名的那就是要跨域,只能通过json来交换数据了,定时从服务器某处读取内容然后显示。
跨页面传递参数
1)在输出页面使用字符串拼接参数传输到打开的新窗口
window.open("${ctx}/jsp/multimedia/MusicPlayer.jsp?event=true","我的音乐");
2)在接收参数页面通过同过Location 对象属性获取参数
//跨页面传递参数截取参数
$(function(){
//调用
var Request = new Object();
Request = GetRequest();
var event= Request.event;
});
function GetRequest() {
var url = location.search; //获取url中"?"符后的字串
console.log(url);
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for(var i = 0; i < strs.length; i ++) {
theRequest[strs[i].split("=")[0]]=decodeURI(strs[i].split("=")[1]);
}
}
console.log(theRequest);
return theRequest;
}
3)对与跨页面传递参数,如果是在同一个窗口,如window.location.href在同一窗口打开新窗口,可以使用sessionStorage,用sessionStorage可以随时获取你想要的参数,而且有时候,你想要在页面刷新前获取参数,只能用sessionStorage。
父页面调用子页面js,通过js设置值
var myFrame = document.getElementById("myFrame");
myFrame.window.callFunction();//callFunction是你iframe加载的页面里面定义的函数,这样就可以执行,可以让函数带参数就可以传值了。调用的时机是在iframe页面加载完成
子页面调用父页面一样的方法,不一样的是直接用parent关键字不用获取元素
parent.window.callFunction();//主页面定义的函数。可以设置参数,就能回传了。
传值应该使用location.search
location.reload 方法是重新加载页面,这个相当于你按键盘的 F5 键,是不能带参数的。
按你说的意思,功能本身是可以实现的,但不是使用 location.reload ,而且是有前提条件的。
浏览器为了安全起见,是不能操作地址不同源的 iframe 标签里的内容的,只能对同源地址的iframe进行操作,什么是同源,如果你不了解,请先搜索一下”同源策略“,简单来说就是 iframe 标签所引入的页面,必须跟你的 主页面是同一个网站中的页面。
如果你上面的效果满足上述前提,也就是 iframe 中引入的页面跟主页面都是你自己写的,而且是同一个网站,那么实现的大概思路是这样的:
1, 点击主页面的查询,将数据显示在 iframe 页面里。
就是在主页面中发起查询请求,然后在iframe 页面中显示查询结果。这里需要js配合,有两种实现方式,一是通过地址栏传递参数,另一种是直接用 js 硬写入 iframe 页面中。 如果是通过地址栏传递参数,在点击主页面的查询之后,在js中使用 iframe.src = '.....html?key1=vaue1&key2=value2' 的方式传递给 iframe 页面,然后 iframe 页面中也需要用 js 来处理传递过来的参数,采用 location.search 来获取传递过来的所有参数,然后进行分割处理;如果是直接硬写入 iframe 页面中,则需要获取到 iframe 页面中相应的标签,获取当前页面中的某个元素,是用 document.get... 之类的方法,这里的 document 就是指当前页面的文档对象,那么获取 iframe ,当然得通过 iframe 页面的文档对象,获取iframe页面文档对象的方法是 iframe.contentWindow.document (iframe指的是 iframe标签,需要先用js获取到这个标签),获取到指定标签之后,就跟操作当前页面一样写数据了。
2,从iframe 子页面中返回数据到主页面中显示,这个跟上面第一步是一样的,也有两种实现思路,也是地址栏传递参数或者硬写,但因为地址栏传参会刷新页面,用户体验不好,所以还是采用硬写入的方式。 主页面写数据到iframe标签,需要先获取标签,反过来也是一样的,iframe页面中写数据到主页面,同样需要先获取到主页面中的标签,获取原理相通,先要找到主页面的文档对象,这里需要清楚整体的页面结构,主页面与 iframe 页面是直接的父子级关系,还是多层嵌套关系?如果是直接的父子关系,那就是 window.parent.contentWindow.document, 如果主页面是最顶层,那就是 window.top.contentWindow.document 。