javascript--iframe的JS方法,用法!contentWindow 、parent、top、onload

还是先感谢“妙味课堂”出的这期教学视频!

一、在使用iframe的页面,要操作这个iframe里面的DOM元素可以用:

contentWindow、contentDocument(测试的时候chrom浏览器,要在服务器环境下)

 

1.先获取iframe里面的window对象,再通过这个对象,获取到里面的DOM元素

例子:

var ifr = document.getElementById("iframe");

ifr.contentWindow.document.getElementById("XXXXX")

<iframe src="a.html" id=""></iframe>

ifr.contentWindow 这里,返回的是iframe的window对象,所以后面可以接着调用document方法,再接着调用getElementByTagName。那么就可以对iframe里面的元素进行操作了。

 

二、在iframe本页面,要操作这个iframe的父页面的DOM元素(即嵌套这个iframe的页面)可以用:

window.parent、window.top(这里的TOP是获取的顶层,即有多层嵌套iframe的时候使用)

var ifr = document.getElementByTagName("iframe");

ifr.parent.document.getElementById("XXXXX")

<iframe src="a.html" id=""></iframe>

 

 三、onload事件

非IE下用法

ifr.onload = function(){
   //SOMETHING
}

 

IE下,需要绑定

ifr.attachEvent("onload",function(){

//something

})

 

 

转载于:https://www.cnblogs.com/lufy/archive/2012/06/02/2532212.html

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以通过以下方法实现 iframe 宽高自适应: 1. 使用 JavaScript 动态计算 iframe 的宽高,并设置给 iframe 元素。 2. 在 iframe 内部页面中,使用 JavaScript 获取父页面的宽高,并设置给 iframe 内部元素。 具体实现方法可以参考以下代码: 1. 使用 JavaScript 动态计算 iframe 的宽高,并设置给 iframe 元素。 ```html <iframe id="my-iframe" src="http://example.com"></iframe> <script> var iframe = document.getElementById('my-iframe'); iframe.onload = function() { var contentWindow = iframe.contentWindow; var contentDocument = contentWindow.document; var contentBody = contentDocument.body; var contentWidth = contentBody.scrollWidth; var contentHeight = contentBody.scrollHeight; iframe.style.width = contentWidth + 'px'; iframe.style.height = contentHeight + 'px'; }; </script> ``` 2. 在 iframe 内部页面中,使用 JavaScript 获取父页面的宽高,并设置给 iframe 内部元素。 ```html <!DOCTYPE html> <html> <head> <title>My Iframe Page</title> <script> window.onload = function() { var parentWindow = window.parent; var parentDocument = parentWindow.document; var parentBody = parentDocument.body; var parentWidth = parentBody.clientWidth; var parentHeight = parentBody.clientHeight; var myElement = document.getElementById('my-element'); myElement.style.width = parentWidth + 'px'; myElement.style.height = parentHeight + 'px'; }; </script> </head> <body> <div id="my-element"></div> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值