从 iFrame 访问 DOM
Posted
技术标签:
【中文标题】从 iFrame 访问 DOM【英文标题】：Access DOM from iFrame 【发布时间】：2016-03-21 02:22:10 【问题描述】：我在iframe 中插入了一个 html 页面：
<iframe src="file:///C:/editor.html" frameborder="0"></iframe>
现在我需要从 iframe 访问 DOM 并通过id 获取元素。
这是我的editor.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Diagram</title>
<script type="text/javascript" src="lib/jquery-1.8.1.js"></script>
<!-- I use many resources -->
<script>
function generatePNG (oViewer)
var oImageOptions =
includeDecoratorLayers: false,
replaceImageURL: true
;
var d = new Date();
var h = d.getHours();
var m = d.getMinutes();
var s = d.getSeconds();
var sFileName = "diagram" + h.toString() + m.toString() + s.toString() + ".png";
var sResultBlob = oViewer.generateImageBlob(function(sBlob)
b = 64;
var reader = new window.FileReader();
reader.readAsDataURL(sBlob);
reader.onloadend = function()
base64data = reader.result;
var image = document.createElement('img');
image.setAttribute("id", "GraphImage");
image.src = base64data;
document.body.appendChild(image);
, "image/png", oImageOptions);
return sResult;
</script>
</head>
<body >
<div id="diagramContainer"></div>
</body>
</html>
我需要从 iframe 访问 DOM，并从我的 edtior.html 获取 image.src。我该怎么做？
【问题讨论】：
【参考方案1】：使用window.parent 或window.top 访问父/主框架窗口。然后你可以得到他们的元素与
window.parent.document.getElementById("id")
等等。
所以你可以在iframe.html:
<html><body>
<script>
var getDiv = function()
return window.parent.document.getElementById("test");
</script>
</body></html>
还有一个包含它的页面：
<html><body>
<div id="test"></div>
<iframe src="#####/iframe.html"></iframe>
</html></body>
现在在 iframe 中调用 getDiv() 将获取父框架中的 div[id=test]。
如果您想做相反的事情，即从 iframe 外部访问 iframe 内的元素，请阅读此答案：
Javascript - Get element from within an iFrame
【讨论】：
当我使用此代码时，我得到空值： 我假设您试图从 iframe 内部的 iframe 外部获取图像。在您的 iframe 代码 (editor.html) 中，您可以使用window.parent 访问包含 editor.html iframe 的 DOM。在您刚刚粘贴的代码中，您的 script 标签不在您的 editor.html 代码中。
我要做的是创建一个 javascript 函数，允许我从包含我的 editor.html 的 iframe 访问 dom。我需要一个例子
我已经更新了答案，举个例子。希望对您有所帮助。
我要做的是访问我的 editor.html 中的 image.src，并使用包含我的 editor.html 的 iframe 跨度>
以上是关于从 iFrame 访问 DOM的主要内容，如果未能解决你的问题，请参考以下文章