JS未跨域操作iframe里的DOM
更新时间：2016年06月01日 14:17:05 作者：九成
这篇文章主要介绍了JS未跨域操作iframe里的DOM 的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
这里简单说明两个方法，都是未跨域情况下在index.html内操作b.html内的 DOM。
如：index.html内引入iframe，在index内如何用JS操作iframe内的DOM元素？
先贴下index.html和iframe引入的a.html内容。
index-> <div class="d1"> <iframe src="a.html" frameborder="0" name="one" id="iframeId"></iframe> </div>
a.html
<div id="dd"> <h1>iframe里的元素！</h1> </div>
法一：
var d=window.frames["one"].window;
d.onload=function(){
console.log(d.document.getElementById("dd"));
};
法二：
JS动态创建iframe并插入
var ifr = document.createElement('iframe');
ifr.src = 'a.html';
document.body.appendChild(ifr);
ifr.onload = function(){
var doc = ifr.contentDocument || ifr.contentWindow.document;
// 在这里操纵b.html
console.log(doc.getElementById("dd"));
};
两种的输出结果都是
以上所述是小编给大家介绍的JS未跨域操作iframe里的DOM 的相关知识，希望对大家有所帮助！
相关文章
这篇文章主要介绍了JavaScript实现的简单拖拽效果,涉及javascript针对鼠标事件与页面样式的操作技巧,需要的朋友可以参考下2015-06-06
Javascript实现一个简单的输入关键字添加标签效果实例
这篇文章主要给大家介绍了利用Javascript实现一个简单的输入关键字添加标签效果的相关资料，类似动态添加标签的效果，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友可以参考借鉴，下面来一起看看吧。2017-06-06
这篇文章介绍了GRID拖拽行的实例代码，有需要的朋友可以参考一下2013-07-07
这篇文章主要介绍了Javascript动态创建表格及删除行列的方法,涉及javascript动态操作表格的相关技巧,需要的朋友可以参考下2015-05-05
最近羊了个羊火的不得了，这篇文章主要为大家介绍了如何利用JS实现个网页版羊了个羊游戏，有需要的朋友可以借鉴参考下，希望能够有所帮助2022-09-09
这篇文章主要介绍了js实现文字跟随鼠标移动而移动的方法,实例分析了javascript处理鼠标事件及文字特效的技巧,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了JavaScript设计模式之调停者模式,详细分析了调停者模式的概念、原理、优缺点并结合javascript实例形式给出了相关使用技巧,需要的朋友可以参考下2018-02-02
想让Enter键跳转的同时让控件获得焦点，具体实现js代码如下，感兴趣的朋友可以参考下，希望对大家有所帮助2013-08-08
今天小编就为大家分享一篇浅谈layui 表单元素的选中问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
这篇文章主要介绍了微信小程序保存多张图片的实现方法，使用promise 队列，保存多张图片到手机相册，小编觉得具有一定的参考价值，有兴趣的可以了解一下2019-03-03
最新评论