访问 iframe 元素并将其更新到 DOM
Posted
技术标签:
【中文标题】访问 iframe 元素并将其更新到 DOM【英文标题】：Access iframe element and update it to the DOM 【发布时间】：2014-09-03 10:33:16 【问题描述】：我想访问包含 img 标签的 page2.html 元素并将其更新为 page1.html img 标签或将 page1.html 的 img 替换为 page2.html img。 这两个文件都在同一个域中，因此无需担心跨域源策略。
// Page1.html
<body>
<img id="someimage1" src="./captcha.asp"></img>
<iframe src="page2.html"></iframe>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript>
var getImg = $('iframe').contents().find('#someimage2').html();
$('#someimage1').replaceWith('<img>' getImg '</img>');
</script>
</body>
我将 DOM 更新为 [object] [Object]
// Page2.html
<body>
<img id="someimage2" src="./captcha.asp"></img>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</body>
【问题讨论】：
【参考方案1】：我会帮你一个 Vanilla JS 解决方案，你可以修改为 JQuery：
首先检查您的 IFrame 是否包含任何文档
Firefox 和 Chrome 解决方案
var frame = document.getElementById("frame");
if(frame.contentDocument)
// get the inner Document
var innerDocument = frame.contentDocument;
var img = innerDocument.getElementsByTagName("img")[0];
IE 解决方案
var frame = document.getElementById("frame");
if(frame.contentDocument)
// get the inner Document
var innerDocument = frame.contentWindow.document;
var img = innerDocument.getElementsByTagName("img")[0];
当你得到图像后，剩下的只是一个 DOM 操作操作。
获取内部文档正文
var getIFrameCOntent = function(iFrame)
var frame = document.querySelector(iFrame);
var innerDocument = frame.contentDocument || frame.contentWindow.document;
var body = innerDocument.getElementsByTagName("body")[0];
return body;
简单的解决方案
var frame = document.getElementById('frame').contentWindow.document.body;
console.log(frame.getElementsByTagName("img")[0]);
【讨论】：
contentDocument 属性在 querySelector 原型中不存在。需要修改：[].forEach.call(document.querySelector(iFrame), function (frame) var body = innerDocument.getElementsByTagName("body")[0]; );【参考方案2】：试试这个代码....
page1.html...
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<div id="imgAA">
</div>
<img src="img1.jpg" style="width:100px;" id="imgBB"/>
<script>
$(document).ready(function()
$("#imgAA").load("page2.html",function(data)
$("#imgBB").attr("src",$("#imgAA").find("img").attr("src"));
);
);
</script>
</body>
page2.html...
<body>
<img src="img2.jpg" style="width:50px;" id="img2"></img>
</body>
试试这个，告诉我它工作正常......
【讨论】：
如果不想显示page2.html内容就隐藏div标签 如果你得到了你想找到的答案，请投票并标记为答案以上是关于访问 iframe 元素并将其更新到 DOM的主要内容，如果未能解决你的问题，请参考以下文章
您如何获取用户的输入并将其添加到 iframe 中的 URL？
将数据发布到站点并将其加载到 iframe 中的另一个站点（角度和 c#）