JS如何对Iframe内外页⾯进⾏操作总结
⽬录
在iframe外获取iframe⾥的内容
⽅式⼀
⽅式⼆
在iframe内获取iframe外的内容
在iframe中调⽤⽗页⾯中定义的⽅法和变量
在⽗页⾯操作iframe⼦页⾯的⽅法和变量
总结
判断iframe加载完成
不同域通信
在iframe外获取iframe⾥的内容
⽅式⼀
通过contentWindow和contentDocument这两个API:
var iframe = ElementById("iframe1");
var iwindow = tWindow;
var idoc = iwindow.document;
var idocument = tDocument;
iframe参数传递
console.log("window",iwindow);//获取iframe的window对象
console.log("document",idoc);  //获取iframe的document
console.log("html",idoc.documentElement);//获取iframe的html
其中tWindow可以获取iframe的window对象,tDocument可以获取iframe的document对象。⽅式⼆
结合Name属性，通过window提供的frames获取:
<iframe src ="/index.html" id="ifr1" name="ifr2" scrolling="yes">
<p>Your browser does not support iframes.</p>
</iframe>
<script type="text/javascript">
console.log(window.frames['ifr2'].window);
console.ElementById("iframe").contentWindow);
</script>
在iframe内获取iframe外的内容
window.parent 获取上⼀级的window对象，如果还是iframe则是该iframe的window对象

在iframe中调⽤⽗页⾯中定义的⽅法和变量
window.parent.window.parentMethod();
window.parent.window.parentValue;
在⽗页⾯操作iframe⼦页⾯的⽅法和变量
window.frames["iframe_Name"].window.childMethod();
window.frames["iframe_Name"].window.childValue;
总结
在使⽤Iframe时还需要注意以下两点：
1. 要确保在iframe加载完成后再进⾏操作，如果iframe还未加载完成就开始调⽤⾥⾯的⽅法或变量，会产⽣错误；
2. 如果iframe所链接的是外部页⾯，因为安全机制不能使⽤同域名下的通信⽅式；
判断iframe加载完成
// TODO
}
不同域通信
⽗页⾯向⼦页⾯传递数据
利⽤location对象的hash值，通过它传递通信数据。在⽗页⾯设置iframe的src后⾯多加个data字符串，然后在⼦页⾯中通过某种⽅式能即时的获取到这⼉的data。
⼦页⾯向⽗页⾯传递数据
利⽤⼀个代理iframe，它嵌⼊到⼦页⾯中，并且和⽗页⾯必须保持是同域，然后通过它充分利⽤上⾯同域通信⽅式的实现原理，把⼦页⾯的数据传递给代理iframe，然后由于代理的iframe和主页⾯是同域的，所以主页⾯就可以利⽤同域的⽅式获取到这些数据。
到此这篇关于JS如何对Iframe内外页⾯进⾏操作的⽂章就介绍到这了，更多相关JS对Iframe页⾯操作内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。