如何用javascript 跨域获取iframe跨域访问页面子页面的元素信息

来源：蜘蛛抓取(WebSpider) 时间：2017-08-06 05:29 标签： iframe嵌套页面 跨域
JS实现子页面iframe跨域访问
我的图书馆
JS实现子页面iframe跨域访问
JS实现子页面iframe跨域访问
前几天一个广告升窗的需求弄得我都快疯了，在全站的右下角弹一个升窗，每个用户只要是打开浏览器就回弹。弹窗里的广告是投放在一个iframe里的，由于广告是在iframe里，并且iframe的层级是最高的，所以，弹窗的关闭按钮也必须做在iframe里，当点击关闭按钮时我是在子页面里调用了父页面的JS函数来关闭这个弹窗，最后问题出现了。
在firefox关闭是没有任何问题的（貌似firefox对跨域做得比较好吧），但是在IE里就出现了“无权访问”的提示信息。
如何解决js iframe跨域问题？其实非常简单，一行JS代码搞定：
document.domain = "codejia.net";
当然设置的域就是你自己的网站，记得在你的子页面和父页面里都加上上面一行！这个是重点哦，我就是因为在父页面没加浪费了好多时间的。
馆藏&23005
TA的最新馆藏
喜欢该文的人也喜欢如何操作iframe里面的元素？
&&&&&div class="qqchat"&
& & & & &iframe id="chat" name="some" src="" frameborder="0"&
& & & & &/iframe&
& & &/div&
为什么我按照网上的方法，怎么都获取不到？？
;$(function({
$(window.frames["chat"].document).find('input').css({'background': 'red'});
不生效啊！！
我用自己后台的链接网址也不生效，排除跨域请求的影响
贴上链接：
http://blog.chinaunix.net/uid--id-3830980.html
跨域的话，无法操作里面的内容，因为浏览器处于安全性考虑，不允许这么做，如果是同域名的iframe，就可以操作，第一个答案就可以。
--- 共有 4 条评论 ---
: 问题解决了就好
: 我知道了，是window.onoload=function(){}的问题
: 你确定一下$(window.frames["chat"].document).find('input').css({'background': 'red'});
这个frames里面是用name还是id获取。还有一个问题就是，即使你获取到了这个frame的document对象，如果里面没有jq的话，不能用jq的方法，也就是后面的find和css是没有，先用原生。
同域名 不行啊
document.getElementById('iframe的ID').contentWindow.document.getElementById('元素的ID')
--- 共有 2 条评论 ---
var x = document.getElementById('qq').contentWindow.document.getElementById('div1');
console.log(x);//获得null
没用，请问有demo吗，给我研究下
这不就是dom元素操作么，w3c不是有么
.cn/jsref/prop_iframe_src.asp下次自动登录
现在的位置:
& 综合 & 正文
iframe跨域javascript访问
问题抽提：主页A.html在域中，要用Ifame嵌入在域中的B.html网页。现在需要让B.html中进行某一操作之后，调用A.html中的js函数onExcute。如果进行一般的操作在B.html中使用"window.parent.onExcute();"调用根本不会被执行，也不提示错误，在调试时会得到"Permission denied
to access property"的提示信息。如果是在同域的两个页面这么使用没有问题，但是在跨域环境下就会出现这样的情况，这就是所谓的“iframe跨域问题"。
在A.html中
&script type="text/javascript"&
function onExcute(wellStr){
//事件响应
}&/script&
&iframe id="bFrameId" src="/B.html" width="100%" height="100%"&&/iframe&
在B.html中的某一事件响应函数中，需要调用A.html中onExcute(……)方法。
问题分析：
(1)A.html与B.html跨域，在B.html使用window.parent.onExcute(……)，会因跨域访问，受浏览器“强制”限制。
(2)网上很解决“iframe高度自适应”的解决方法，都通过B.html的window的location是可以公共访问的，location.hash用来存放需要需要传递的参数。但是本问题是方法调用，需要触发js函数的调用，而不仅仅是参数的获取。基于此也有极差的解决办法是，监测B.html中location.hash值的变化，在A.html中写一函数定时检测（如一秒钟）此值，一旦B.html中响应事件之后将参数放于location.hash中，那么A.html在周期内会检测到此值的变化。
(3)网上还有解决解决方法：其一是欺骗法，两个网页document.domain尽管不一样，可以强制使值一样为“"，以此达到欺骗IE的目的（其它浏览器不一定起效）。不适用于原因主页面使用大量的脚本框架，会影响其它部分功能的使用。其二是"同域iframe无限制“的方法，就是由于跨域脚本中对parent访问iframe的属性无限制。就是在B.html中再嵌入iframe（内容是来自与A.html同域的网页C.html），特别适用于解决高度自适应的问题（C.html可以直获取B.html的iframe宽高信息，而A.html与C.html是同域的，可以js函数调用不会受限）。
但是，仍然无法实现事件的即时触发。
解决方案：结合以上两种方法（location.hash存储参数，同域iframe脚本调用无限制）
(1)在B.html中触发事件（例如函数btnEvent())中，修改C.html的location.href。其中的hash是url后面的从"#"开关的部分，用于存储参数，hash值的改变不影响iframe的刷新；而url后面的参数"redirected=true"用于修改url（实际上还是本页），主要用于触发cFrame重新加载（即C.html中的window.onload事件)
function btnEvent(){
var str = 'well_1,well_2';
//注意： frames获取C.html的frame时， cFrameId 是iframe的name属性
//其中‘redirected=true’故意添加参数，强迫C.html的页面刷新，响应onload事件
document.getElementById('cFrameId').setAttribute('src', '/C.html?redirected=true' + '#' + str);
&iframe id="cFrameId" name=' cFrame' src="/C.html" style="display: none"&&/iframe&
(2)在C.html中，使用页面加载过程中响应事件，通过url的参数判断当前加载是否是B.html的操作引起的，如果是，则需要马上响应A.html中的onExcute()函数，然后需要再次刷新当前页，来恢复url中的无参状态，以保证B.html中通过修改url能够再次触发C.html刷新页面加载onload事件。
window.onload = function(){
var url = window.location.
if(url.indexOf('redirected=true') & -1){
var str= location.
//以#开头的信息
if(str.length & 1){
str= str.substring(1);
window.parent.parent.onExcute(str);
window.location.href = '/C.html';
//恢复状态，以方便B.html再次响应事件
总结：在B.html中能够调用A.html中的js函数的根本原因，是B.html能够控制其内嵌iframe（cFrame）的location，从而导致其内嵌iframe(因刷新页面）触发的onload事件。而从B.html传递的参数，则是通过url后缀加（以"#"开开头的）hash值来实现的，实际上，也可以不用hash，（既然用到了参数，何不用两个参数呢？）用两个url参数就可以，一个用来表示状态（如上面的"redirected=true"），一个用来传递B.html要调用A.html中js函数的参数（用来替换上面在url后面缀加hash值用来传参的方法）。同理，如果反过来，希望A.html调用B.html中的js函数，则需要通过修改bFrame（B.html所在的iframe）中location，来触发B.html的加载，在onload时通过url参数来判断是否该调用此B.html中的js函数。这样做可以解决这样的问题，但缺陷是B.html刷新太频繁，每次调用都需要刷新B.html两次。
&&&&推荐文章:
【上篇】【下篇】推荐这篇日记的豆列
&&&&&&&&&&&&JS获取iframe元素及跨域访问操作_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
JS获取iframe元素及跨域访问操作
上传于|0|0|文档简介
你可能喜欢

我要回帖

更多关于 iframe嵌套页面 跨域 的文章

 

随机推荐