纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

JS对Iframe页面操作 JS怎样对Iframe内外页面进行操作总结

道系小布丁   2021-10-12 我要评论
想了解JS怎样对Iframe内外页面进行操作总结的相关内容吗,道系小布丁在本文为您仔细讲解JS对Iframe页面操作的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:js获取iframe,js父页面调用iframe里面的方法,iframe用法详解,下面大家一起来学习吧。

在iframe外获取iframe里的内容

方式一

通过contentWindow和contentDocument这两个API:

var iframe = document.getElementById("iframe1");
var iwindow = iframe.contentWindow;
var idoc = iwindow.document;
var idocument = iframe.contentDocument;
console.log("window",iwindow);//获取iframe的window对象
console.log("document",idoc);  //获取iframe的document
console.log("html",idoc.documentElement);//获取iframe的html

其中iframe.contentWindow可以获取iframe的window对象,iframe.contentDocument可以获取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.dir(document.getElementById("iframe").contentWindow);
</script>

在iframe内获取iframe外的内容

window.parent 获取上一级的window对象,如果还是iframe则是该iframe的window对象
window.top 获取最顶级容器的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加载完成

iframe.onload = function() {
    // TODO
}

不同域通信

父页面向子页面传递数据

利用location对象的hash值,通过它传递通信数据。在父页面设置iframe的src后面多加个data字符串,然后在子页面中通过某种方式能即时的获取到这儿的data。

子页面向父页面传递数据

利用一个代理iframe,它嵌入到子页面中,并且和父页面必须保持是同域,然后通过它充分利用上面同域通信方式的实现原理,把子页面的数据传递给代理iframe,然后由于代理的iframe和主页面是同域的,所以主页面就可以利用同域的方式获取到这些数据。


相关文章

猜您喜欢

  • MySQL MHA 运行状态监控 MySQL MHA 运行状态监控介绍

    想了解MySQL MHA 运行状态监控介绍的相关内容吗,东山絮柳仔在本文为您仔细讲解MySQL MHA 运行状态监控的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:MySQL,MHA,运行状态监控,MySQL,MHA,下面大家一起来学习吧。..
  • c++算法动态解决CoinChange c++基础算法动态DP解决CoinChange问题

    想了解c++基础算法动态DP解决CoinChange问题的相关内容吗,zjuPeco在本文为您仔细讲解c++算法动态解决CoinChange的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:c++基础算法,c++动态DP解决Coin,Change,下面大家一起来学习吧。..

网友评论

Copyright 2020 www.3a4a5a.com 【3A软件站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式