生活永远是一个大染缸,一块白布下去,黑布出来,一块黑布下去,一块七色布出来。

contentWindow 兼容各个浏览器,可取得子窗口的 window 对象。
contentDocument Firefox 支持,> ie8 的ie支持。可取得子窗口的 document 对象。

在子级iframe设置 父级 iframe ,或 孙级 iframe 高度。

function showIframeH(){
  var parentWin = parent.document.getElementById("test");
  if(!parentWin) return false;
  var sub = parentWin.contentWindow.document.getElementById("test2");
  if(!sub) return false;
  var thirdHeight = sub.contentWindow.document.body.offsetHeight; //第三层 body 对象
  sub.height = thirdHeight; //设置第二层 iframe 的高度
  var secondHeight = x.contentWindow.document.body.offsetHeight; //第二层 body 对象
  x.height = secondHeight; //设置第一层 iframe 的高度
  //alert(secondHeight);
  //alert('body: '   x.contentDocument.body.offsetHeight   ' div:'   thirdHeight);
}

下面附一个实例,因为2345的推广,很多导航站都将网址直接换成2345的推广页面了,那就是当前域名下获取2345中的宽度,然后通过js设置iframe内容的高度,这样看起来是一个整体,核心内容如下

iframe

<body>
<iframe id="mainFrame" onload="mainFrameLoaded(this)" scrolling="no" src="https://www.2345.com/"></iframe>

js代码

<script>
	function mainFrameLoaded(t) 
	{
		//debugger;
		//alert(t.contentWindow.document.body.offsetHeight);
  t.style.height = t.contentWindow.document.body.offsetHeight   'px';
	}
</script>

记住js写在前面,iframe在后面,通过onload加载的时候就触发,完美融合。

深入解析contentWindow, contentDocument的更多相关文章

  1. 深入解析contentWindow, contentDocument

    没有永恒的技术只有变态的需求,没有好说的客户只有无奈的开发者,如果iframe的出现是一个错误的话,iframe里边在来一个iframe那是错上加错,神话没有在远古的尘嚣中消失,却在怀具的今天不断上演

  2. html5使用window.postMessage进行跨域实现数据交互的一次实战

    这篇文章主要介绍了html5使用window.postMessage进行跨域实现数据交互的一次实战,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  3. 跨域解决方案 ajax代理

    最近有一个项目是要获取在跨域的数据,利用了iframe代理页面来解决。

  4. jquery – 如何从父页面调用iframe中的函数?

    解决方法只要框架页面位于同一个域,您就需要访问frame元素的contentwindow属性.例如:大多数浏览器也支持contentDocument,但InternetExplorer不支持.如果您的框架页面位于不同的域上,那么您将收到“拒绝访问”错误.

  5. javascript – HTML5 – 跨浏览器iframe postmessage – 父与子通信

    我写了一个内容脚本,将iframe注入任何网站(因此不同的域).我需要父网站向子iframe发送一些信息,但我找不到办法.代码以某种方式不起作用,我得到一个无法调用未定义错误的方法’postMessage’.但是当我在Chrome的控制台中直接尝试相同的代码时,它确实有用.我将postMessage从子节点发送到父节点没有问题,但只需要一种方法让父节点向子节点iframe发送消息.解决方法我最近编

  6. javascript – 调试iframe contentWindow时,Chrome开发工具崩溃了

    我正在尝试调试iframe的contentwindow,但每次我尝试在chrome59dev-tools上查看contentwindow对象时页面崩溃.将鼠标悬停在断点上的contentwindow属性或单击控制台记录的对象时会发生这种情况.我正在使用ReactJS,所以我创造了一个反应小提琴,虽然我不认为这是相关的.Fiddletoreproduce:>打开开发工具>点击“试试”>单击console.logged对象.有没有办法避免崩溃?解决方法由于新的contextselection功能,这似乎在ch

  7. javascript – 使用基于iframe的视图很难访问Dynamics 2013访问网页实体

    如何轻松可靠地访问保存主页面实体并使用它们的正确框架.也许脚本位于错误的位置,需要注入主内容区域,以便直接访问正确的Xrm?我怎样才能做到这一点?

  8. javascript – iframe.contentWindow.document Chrome另类?

    我如何在Chrome中调用以下内容?

  9. javascript – 如何在chrome开发人员工具或chromebug Lite中加入iframe?

    当我尝试cd,控制台说“cd没有定义”解决方法是的,你是对的Firebug有这个令人敬畏的命令.我很喜欢.它正在使用iframe更容易.就个人而言,我不会去Firefox,因为cd()可用,因为我可以做任何我可以做的cd在chrome开发工具.只需在命令提示符下使用contentwindow关键字即可访问iframe窗口对象.那么你将很乐意访问任何函数和变量.例如,我的iframe中有一个变量,它

  10. javascript – Cordova跨域文件:// iframe contentwindow communication

    我发现我可以使用iframe的contentwindow属性从远程主机上托管的文件://上的页面和iframe进行跨域通信.例如,在设备上,我在url文件中有一个html页面://…

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部