简要咨询咨询QQ网站导航网站搜索手机站点联系我们设为首页加入收藏 

JS未跨域操作iframe里的DOM

来源:易贤网   阅读:1480 次  日期:2016-06-17 13:54:44

温馨提示:易贤网小编为您整理了“JS未跨域操作iframe里的DOM”,方便广大网友查阅!

这篇文章主要介绍了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 的相关知识,希望对大家有所帮助!

更多信息请查看网络编程
点此处就本文及相关问题在本站进行非正式的简要咨询(便捷快速)】     【点此处查询各地各类考试咨询QQ号码及交流群
上一篇:js匿名函数作为函数参数详解
下一篇:jQuery简单实现上下,左右滑动的方法
易贤网手机网站地址:JS未跨域操作iframe里的DOM
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!