获取/设置IFRAME内对象元素的几种JS方法

1。IE专用(通过frames索引形象定位): document.frames[i].document.getElementById('元素的ID');
2。IE专用(通过IFRAME名称形象定位): document.frames['iframe的name'].document.getElementById('元素的ID');

  以上方法,不仅对IFRAME适用,对FRAMESET里的FRAME也同样适用。IE虽然擅于自定标准,但不得不说它很多的设计还是比较体现人性化的。比如这个,它在同样支持下面的标准路径之外,提供了一个简洁且形象化的写法。

 

3。通用方法: document.getElementById('iframe的ID').contentWindow.document.getElementById('元素的ID')
  注意要加上contentWindow,往往出现问题都是因为这个容易被忽略,它代表FRAME和IFRAME内部的窗口对象。

  但是,很明显,这种写法非常要命,太长了。如果要操作一系列里面的元素,这样写起来,实在够受的,就算用复制粘贴大法,眼睛看起来也是个问题。

 

4。通用方法的简写:

  对document.getElementById定义一个短名称,稍微熟悉JS的朋友都知道这个方法。在这里它可以发挥双倍的作用,如下例:

 

在这一点上,我还是喜欢IE的做法,比较呵护。因为微软不是一个单独的浏览器开发商,它本身也要大量地编写开发HTML/ASP等文档,所以比较能够做到这一点。而其它的浏览器开发商,基本只是站在一个浏览器的立场,把最基本的链路走通就完事了,很少站在开发者立场去设计出一些类似这样既简便又不失语义化的捷径来。很多人动辄说它们“标准”,在有些地方固然有理,但在有些地方,这种标准也不过是一种冷漠。

 

转载请注明来自赵亮(theforever on csdn)的博客。

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 内嵌frame/iframe的页面操作方法包括以下几种: 1. 使用JavaScript操作iframe元素 可以通过JavaScript获取iframe元素,然后对其进行操作,例如修改其src属性、获取其内容等。具体用法如下: ``` // 获取iframe元素 var iframe = document.getElementById('my-iframe'); // 修改iframe的src属性 iframe.src = 'http://www.example.com'; // 获取iframe的内容 var iframeContent = iframe.contentDocument || iframe.contentWindow.document; ``` 2. 使用iframe的contentWindow对象操作子页面 可以通过iframe的contentWindow对象获取子页面的window对象,然后对其进行操作,例如调用子页面的函数、修改子页面的属性等。具体用法如下: ``` // 获取子页面的window对象 var childWindow = iframe.contentWindow; // 调用子页面的函数 childWindow.myFunction(); // 修改子页面的属性 childWindow.myProperty = 'new value'; ``` 3. 使用iframe的contentDocument对象操作子页面 可以通过iframe的contentDocument对象获取子页面的document对象,然后对其进行操作,例如修改子页面的元素、添加新元素等。具体用法如下: ``` // 获取子页面的document对象 var childDocument = iframe.contentDocument || iframe.contentWindow.document; // 修改子页面的元素 var childElement = childDocument.getElementById('my-element'); childElement.innerHTML = 'new content'; // 添加新元素 var newElement = childDocument.createElement('div'); newElement.innerHTML = 'new element'; childDocument.body.appendChild(newElement); ``` 以上就是内嵌frame/iframe的页面操作方法及其用法的介绍。 ### 回答2: 内嵌frame/iframe是指在一个网页嵌入另一个网页。这样做的好处是可以方便地在同一个网页展示不同的内容,提高用户体验。在操作内嵌frame/iframe时,常见的方法有3种:1. 获取iframe对象 2. 利用iframe引用 3. 利用window.frames 1. 获取iframe对象 通过“document.getElementById("iframe").contentWindow”语句获取iframe的引用对象,然后可通过此引用对象操作该iframe。 例如: ``` <iframe id="iframe" src="page.html"></iframe> <script> var ifr = document.getElementById("iframe").contentWindow; ifr.postMessage("hello", "http://localhost"); </script> ``` 以上代码获取了ID为iframeiframe元素,通过contentWindow属性获取到了该iframe内部的引用对象ifr,然后通过postMessage方法将消息“hello”发送给地址为http://localhost的窗口。 2. 利用iframe引用 利用iframe的引用对象ifr,可以访问到该iframe内部的DOM、CSS和JS等资源。 例如: ``` var ifr = document.getElementById("iframe"); ifr.contentWindow.document.getElementById("button").onclick = function(){ alert("click"); } ``` 以上代码获取了ID为iframeiframe元素,通过contentWindow属性获取到该iframe内部的引用对象ifr,然后通过ifr的contentWindow.document属性获取到该iframe内部的document对象,最终通过document对象可以访问到页面元素并绑定事件,此处绑定了按钮的click事件。 3. 利用window.frames window.frames属性返回了页面所有frame和iframe的引用数组,可以遍历数组来操作内嵌的frame/iframe。 例如: ``` for(var i=0;i<window.frames.length;i++){ var iframe = window.frames[i]; if(iframe.location.href == "http://localhost/index.html"){ iframe.postMessage("hello", "http://localhost"); } } ``` 以上代码利用for循环遍历了window.frames数组,获取到了每一个frame或iframe的引用对象,然后判断其location.href属性是否为http://localhost/index.html,若是则通过postMessage方法给其发送消息。 总之,以上3种方法都可以操作内嵌的frame/iframe,可根据实际需求进行选择使用。同时,需要注意的是,跨域访问iframe的资源时需特别处理。 ### 回答3: 内嵌frame/iframe是web开发常用的一种技术,可以将一个网页嵌入到另一个网页。在实际开发,我们可能需要对内嵌的frame/iframe进行一些操作,如获取元素、改变样式、发送请求等。本文将介绍几种常用的内嵌frame/iframe的页面操作方法。 一、获取内嵌frame/iframe 1. 通过id获取 可以使用document.getElementById()方法获取frame/iframe元素,然后通过.contentDocument属性获取文档对象。 示例代码: ``` <iframe id="myFrame" src="http://www.baidu.com"></iframe> <script> var iframe = document.getElementById("myFrame"); var innerDoc = iframe.contentDocument || iframe.contentWindow.document; </script> ``` 2. 通过name获取 可以使用document.getElementsByName()方法获取frame/iframe元素集合,然后通过索引获取元素,再通过.contentDocument属性获取文档对象。 示例代码: ``` <iframe name="myFrame" src="http://www.baidu.com"></iframe> <script> var iframe = document.getElementsByName("myFrame")[0]; var innerDoc = iframe.contentDocument || iframe.contentWindow.document; </script> ``` 二、在内嵌frame/iframe执行脚本 1. 使用ContentWindow对象 ContentWindow是一个表示内嵌frame/iframe窗口的对象,在其可以直接执行脚本。 示例代码: ``` <iframe id="myFrame" src="http://www.baidu.com"></iframe> <script> var iframe = document.getElementById("myFrame"); var innerWin = iframe.contentWindow; //在内嵌网页执行JavaScript代码 innerWin.postMessage("Hello", "http://www.baidu.com"); </script> ``` 2. 使用eval()函数 也可以在父页面通过eval()函数来执行内嵌frame/iframe的脚本代码。 示例代码: ``` <iframe id="myFrame" src="http://www.baidu.com"></iframe> <script> var iframe = document.getElementById("myFrame"); var innerDoc = iframe.contentDocument || iframe.contentWindow.document; //在内嵌网页定义一个变量 innerDoc.write("<script>var msg='Hello World';</script>"); //在父网页读取该变量 var msg = iframe.contentWindow.eval("msg"); console.log(msg); </script> ``` 三、修改内嵌frame/iframe的样式 可以通过document对象的样式属性来修改内嵌frame/iframe的样式。 示例代码: ``` <iframe id="myFrame" src="http://www.baidu.com"></iframe> <script> var iframe = document.getElementById("myFrame"); var innerDoc = iframe.contentDocument || iframe.contentWindow.document; //修改内嵌网页body的背景色 innerDoc.body.style.backgroundColor = "yellow"; </script> ``` 四、向内嵌frame/iframe发送请求 1. 使用XMLHttpRequest对象 可以在父页面使用XMLHttpRequest对象来向内嵌frame/iframe发送请求。 示例代码: ``` <iframe id="myFrame" src="http://www.baidu.com"></iframe> <script> var iframe = document.getElementById("myFrame"); var innerWin = iframe.contentWindow; //在内嵌网页定义一个函数 innerWin.postMessage("Hello", "http://www.baidu.com"); //在父网页发送XMLHttpRequest请求 var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { console.log(xhr.responseText); } }; xhr.open("GET", "http://www.baidu.com", true); xhr.send(); </script> ``` 2. 使用jsonp 也可以使用jsonp的方式来向内嵌frame/iframe发送请求。 示例代码: ``` <iframe id="myFrame" src="http://www.baidu.com"></iframe> <script> var iframe = document.getElementById("myFrame"); var innerDoc = iframe.contentDocument || iframe.contentWindow.document; //在内嵌网页定义一个函数 innerDoc.write("<script>function callback(response) {console.log(response);}</script>"); //在父网页向内嵌frame/iframe发送jsonp请求 var script = document.createElement("script"); script.src = "http://www.baidu.com?callback=callback"; document.body.appendChild(script); </script> ``` 总之,以上是常用的内嵌frame/iframe的页面操作方法,我们可以通过这些方法来操作内嵌frame/iframe元素、样式、脚本和请求等内容,提高页面交互性和用户体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值