如何用JS操作iFrame里的Dom

最新推荐文章于 2020-09-30 14:35:47 发布
最新推荐文章于 2020-09-30 14:35:47 发布
阅读量1.3k 收藏
点赞数
分类专栏： 前台 JS/Jquery 文章标签： 父页面取子页面元素 跨域错误

如题，父页面的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.
<iframe id="container" name="container" src="frames/index.html">...</iframe>​

 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
HF805
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
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 373
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 2640
使用 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 617
iframe相当于一个嵌入在网页内的浏览器，它与当前网页是隔离的。 但有时我们也需要在当前网页操作iframe内的元素或操作iframe内的javascript方法。 在网页内操作DOM元素，是使用document对象。那么，当我们需要操作iframe内的元素时，就需要找到iframe内的document对象。 假设有以下HTML代码： <iframe id="ifm" src=...
Js操作iframe
Gob
12-02 787
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 1208
父页面<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的DOM操作
11-29
iframe的DOM操作 iframe的DOM操作 iframe的DOM操作 iframe的DOM操作
iframe与主框架跨域相互访问实现方法
08-29
今天正好需要用到iframe 与主框架相互访问的实现方法，正好看到了这篇文章，确实不错，特分享一下,需要的朋友可以参考下
JS操作之iframe
weixin_42979149的博客
09-30 3428
window.frameElement 返回嵌入当前window对象的元素(比如 或者 ),如果当前window对象已经是顶层窗口,则返回null. window.name 获取/设置窗口的名称。
javascript之JS操作iframe
iteye_3352的博客
02-28 818
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 1264
js操作iframe(一)
Jquery操作 iframe父级页面的dom元素的方法
LaOngDaoxing的博客
08-09 930
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 4719
一、父级窗口操作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 1059
为什么80%的码农都做不了架构师？>>> ...
JS操作iframe里的dom,js iframe
hgfghwq10
07-05 150
　　直接赋值如下代码测试即可明白： 　　1.html: 　　 　　 　　 　　 　　无标题文档 　　 　　 　　====================注意:测试从这里开始========================= 　　用来测试子窗体iframeA访问父窗体的某元素 　　====================iframe分割线===================...
js操作控制iframe页面的dom元素
最新发布
06-09
要操作控制iframe页面的dom元素，需要先获取到iframe元素，然后通过iframe元素的contentWindow属性获取到iframe内部的window对象，最后通过window对象就可以访问到iframe内部的dom元素。以下是一个简单的示例代码： ```javascript // 获取iframe元素 var iframe = document.getElementById('myIframe'); // 获取iframe内部的window对象 var iframeWindow = iframe.contentWindow; // 访问iframe内部的dom元素 var iframeDocument = iframeWindow.document; var iframeBody = iframeDocument.body; var iframeDiv = iframeDocument.getElementById('myDiv'); // 修改iframe内部的dom元素 iframeDiv.innerHTML = 'Hello World!'; ``` 需要注意的是，由于同源策略的限制，如果iframe和主页面不是同一个域名、协议、端口号，那么无法直接访问iframe内部的dom元素。解决方法一般是在iframe内部设置一个跨域代理页面，主页面通过代理页面来操作iframe内部的dom元素。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值