如何用JS操作iFrame里的Dom

最新推荐文章于 2020-09-30 14:35:47 发布

转载最新推荐文章于 2020-09-30 14:35:47 发布 · 1.3k 阅读

文章标签：

#父页面取子页面元素 #跨域错误

前台同时被 2 个专栏收录

32 篇文章

订阅专栏

JS/Jquery

22 篇文章

订阅专栏

如题，父页面的JS如何拿到iframe里的dom，并且进行操作？原生JS，不用JQ之类的页面代码：

<body>
    <iframe id="container" name="container" src="frames/index.html"></iframe>
</body>

在chrome的console里：

document.getElementById("container")

Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.

Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match. Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.

document.getElementById("container").contentWindow.document

Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.

undefined

window.frames["container"].document

Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.

undefined

虽然是相对路径，还是出现跨域的错误。

最后找到原因了，文件之间的操作是按照跨域处理的，把文件放在web容器里，127.0.0.1 去访问就好了

原文：http://segmentfault.com/q/1010000000199925

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

HF805

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

JS操作iframe里的dom(实例讲解)

10-26

总的来说，JS操作`iframe`里的DOM主要涉及以下几个步骤： 1. 获取`iframe`对象：`document.getElementById('iframeId')` 2. 访问`iframe`的`window`对象：`iframeObject.contentWindow` 3. 访问`iframe`的`document`...

JS未跨域操作iframe里的DOM

12-28

如：index.html内引入iframe，在index内如何用JS操作iframe内的DOM元素？先贴下index.html和iframe引入的a.html内容。 index-> <iframe src=a.html frameborder=0 name=one id=iframeId></iframe> ...

参与评论您还未登录，请先登录后发表或查看评论

JS操作iframe

06-27

445

1. 获得iframe的window对象存在跨域访问限制。chrome：iframeElement. contentWindow firefox： iframeElement.contentWindow ie6：iframeElement.contentWindow 文章Iframes, onload, and document.domain中说“he iframe element o

JavaScript 操作 iframe 中的Dom

Latency の博客

05-18

3089

使用 iframe.contentWindow.document 在父窗口中获取子窗口中的Dom var iframe = document.getElementById('iframe'); iframe.contentWindow.document.getElementById("xx").style.backgroundColor="#f00"; 使用 parent.documen

笔记：javascript操作iframe内的DOM元素，及调用iframe内的方法

weixin_30463341的博客

03-02

749

iframe相当于一个嵌入在网页内的浏览器，它与当前网页是隔离的。但有时我们也需要在当前网页操作iframe内的元素或操作iframe内的javascript方法。在网页内操作DOM元素，是使用document对象。那么，当我们需要操作iframe内的元素时，就需要找到iframe内的document对象。假设有以下HTML代码： <iframe id="ifm" src=...

Js操作iframe

Gob

12-02

857

Js操作iframe核心是操作本页面跟iframe的window对象比较常用的案例：通过iframe来无刷新登录（远古的ajax）重点在：form的target 忘记密码？记住我登录使用合作网站账号登录：还没有帐号？马上注册

JS操作iframe里的dom

07-28

在本篇文章中，我们将深入探讨如何使用JS在iframe内进行DOM操作。首先，理解iframe的基本概念至关重要。iframe（Inline Frame）是HTML中的一个元素，允许在同一个HTML文档中嵌入另一个HTML文档。这在需要在页面中...

js操作iframe

piaoxuan1987

10-10

1298

父页面<iframe name="iframe1" ></iframe> <iframe name="iframe2" ></iframe> <script type="text/javascript"> function p_mothd1(){ alert('p_mothd1'); } </script>子页面iframe1页面function iframe1_mothd1(){ al

iframe与主框架跨域相互访问实现方法

08-29

今天正好需要用到iframe 与主框架相互访问的实现方法，正好看到了这篇文章，确实不错，特分享一下,需要的朋友可以参考下

JS获取并操作iframe中元素的方法

12-09

JS获取/设置iframe内对象元素、文档的几种方法 1、IE专用(通过frames索引形象定位)：代码如下: document.frames[i].document.getElementById(‘元素的ID’); 2、IE专用(通过iframe名称形象定位)：代码如下: document.frames[‘iframe的name’].document.getElementById(‘元素的ID’); 以上方法，不仅对iframe适用，对frameset里的frame也同样适用。IE虽然擅于自定标准，但不得不说它很多的设计还是比较体现人性化的。比如这个，它在同样支持下面的标准路

JS操作之iframe

weixin_42979149的博客

09-30

3487

window.frameElement 返回嵌入当前window对象的元素(比如或者 ),如果当前window对象已经是顶层窗口,则返回null. window.name 获取/设置窗口的名称。

javascript之JS操作iframe

iteye_3352的博客

02-28

897

JS操作iframe 1. 获得iframe的window对象 2. 获得iframe的document对象 3. iframe中获得父页面的window对象 4. 获得iframe在父页面中的html标签 5. iframe的onload事件 6. frames 参考文章 1. 获得iframe的windo...

JS操作iframe（一）

macanfa的博客

10-26

1340

js操作iframe(一)

Jquery操作 iframe父级页面的dom元素的方法

LaOngDaoxing的博客

08-09

1007

ligerUI表格行渲染 //全局变量 var grid=null; var gridparams; var gridColumn =[ {display: 'id ',name: 'id',align: 'left',width:300,hide:true} , {display: '产品名称',name: 'cpmc',align: 'center',width:200,render...

js操作iframe中的dom

zhangw428的专栏

11-29

4810

一、父级窗口操作iframe里的dom<br />JS操作iframe里的dom可是使用contentWindow属性，contentWindow属性是指指定的frame或者iframe所在的window对象，在IE中iframe或者frame的contentWindow属性可以省略，但在Firefox中如果要对iframe对象进行编辑则，必须指定contentWindow属性，contentWindow属性支持所有主流浏览器。<br />相关的还有一个contentDocument属性，这个属性是指指

iframe父页面与子页面之间的dom操作

weixin_34214500的博客

05-23

1150

为什么80%的码农都做不了架构师？>>> ...

JS操作iframe里的dom,js iframe

hgfghwq10

07-05

186

　　直接赋值如下代码测试即可明白：　　1.html: 　　　　　　　　　　无标题文档　　　　　　====================注意:测试从这里开始========================= 　　用来测试子窗体iframeA访问父窗体的某元素　　====================iframe分割线===================...

IE用 JS访问操作iframe里的dom

最新发布

03-17

<think>好的，我现在要解决用户的问题：如何在IE浏览器中使用JavaScript访问和操作iframe中的DOM元素。根据提供的引用内容，我需要整理出具体的方法，并确保兼容性。首先，用户提到在IE中可以通过document.frames["IframeName"]来获取iframe对象，例如引用4中的例子。同时，引用2指出在IE中，contentWindow属性可以省略，也就是说可以直接使用iframe元素来访问其contentWindow。这应该是关键点之一。接下来，我需要对比IE和其他浏览器（如Firefox）的不同处理方式。根据引用2，Firefox必须使用contentWindow属性，而IE则可以省略。所以，为了兼容性，可能需要同时处理这两种情况。然后，获取到iframe的window对象后，如何访问其DOM元素呢？通常的做法是通过contentDocument属性获取文档对象，再使用标准方法如getElementById。但IE可能不支持contentDocument，这时候应该使用document.frames或者直接通过iframe元素来访问文档。引用3中提到使用document.createElement等方法操作DOM，但这里主要关注的是跨iframe的访问。用户的问题集中在访问和操作，比如获取元素并修改内容。还需要注意跨域问题，但用户的问题可能是在同域下，所以暂时不考虑跨域限制。引用4提到JS跨域访问iframe的DOM，但可能涉及不同浏览器的安全策略，不过用户没有特别提到跨域，所以可能先处理同域情况。总结步骤应该是： 1. 获取iframe元素的引用，可以通过document.getElementById或document.frames。 2. 在IE中，使用document.frames或直接通过iframe元素获取其contentWindow。 3. 通过contentWindow.document来访问iframe内的文档对象。 4. 使用标准DOM方法操作元素，如getElementById和innerHTML。同时，要处理不同浏览器的兼容性问题，比如在IE中可能需要检查document.frames是否存在，或者是否支持contentWindow属性。此外，contentDocument在较旧的IE版本中可能不可用，需要用contentWindow.document代替。测试代码的结构可能包括： - 通过id获取iframe元素。 - 使用contentWindow或document.frames获取window对象。 - 访问其document。 - 查找元素并修改内容。还需要注意执行时机，确保iframe加载完成后再操作，可能需要监听load事件。最后，给出示例代码，并说明在IE中的处理方式，以及兼容性写法。</think>在 Internet Explorer 中使用 JavaScript 操作 iframe 内的 DOM 元素，可通过以下步骤实现： --- ### 一、获取 iframe 的 window 对象 1. **通过 `document.frames` 访问** IE 支持直接通过 `document.frames["iframe名称"]` 获取 iframe 的 window 对象： ```javascript var iframeWindow = document.frames["myIframe"]; // myIframe 是 iframe 的 name 属性值 ``` 2. **通过 DOM 元素访问** 若通过 `document.getElementById` 获取 iframe 元素，需使用 `contentWindow` 属性（IE 可省略，但建议保留以兼容其他浏览器）： ```javascript var iframe = document.getElementById("myIframe"); var iframeWindow = iframe.contentWindow || iframe; // IE 兼容处理 ``` --- ### 二、操作 iframe 内的 DOM 元素 1. **获取文档对象** 通过 iframe 的 window 对象访问其文档： ```javascript var iframeDoc = iframeWindow.document; // IE 可直接使用 .document ``` 2. **修改元素内容** 使用标准 DOM 方法操作元素，例如修改 `innerHTML`： ```javascript var element = iframeDoc.getElementById("targetElement"); element.innerHTML = "修改后的内容"; ``` --- ### 三、完整示例代码 ```html <iframe name="myIframe" id="myIframe" src="inner.html"></iframe> <script> // 方法1：通过 document.frames (IE 兼容) var iframeWindow = document.frames["myIframe"]; // 方法2：通过 DOM 元素 (推荐跨浏览器) var iframe = document.getElementById("myIframe"); iframe.onload = function() { var iframeDoc = iframe.contentWindow?.document || iframe.contentDocument; var header = iframeDoc.getElementById("header"); header.innerHTML = "IE 中已修改标题"; }; </script> ``` --- ### 四、注意事项 1. **跨域限制** 若 iframe 加载的是不同域页面，浏览器会因安全策略禁止跨域访问 DOM[^4]。 2. **加载时机** 操作 DOM 前需确保 iframe 内容已加载完成，可通过 `onload` 事件监听。 3. **兼容性优化** 使用 `contentWindow || contentDocument` 兼容旧版 IE 和其他浏览器[^2]。 ---