JS未跨域操作iframe里的DOM
2016-06-17来源:易贤网

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

2026公务员·事业单位培训课程试听报名

  • 报班类型
  • 姓名
  • 手机号
  • 验证码
推荐信息