Iframe Dom 错误：无法读取 null 的属性“src”
Posted
技术标签:
【中文标题】Iframe Dom 错误：无法读取 null 的属性“src”【英文标题】：Iframe Dom error :cannot read property "src" of null 【发布时间】：2016-03-21 09:52:45 【问题描述】：我使用以下代码将 editor.html 放入 iframe 中：
<iframe name= "iframeEditor" id="ifrm" src="editor.html" frameborder="0"></iframe>
然后，我必须在我的“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 sResult = 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>
我应该从包含我的 editor.htm 的 iframe 访问 image.src，所以我尝试使用以下代码：
<script>
var if1 = document.getElementById("ifrm");
var fc = (if1.contentWindow || if1.contentDocument);
var img1 = fc.document.getElementById("GraphImage");
console.log(img1.src);
</script>
但我收到一个错误：无法读取 null 的属性“src”
【问题讨论】：
你确定你的脚本是在图片加载后运行的吗？在onloadend回调中添加一些console.log，并检查它是否在错误之前被调用。 我在 onloadend 回调中添加了 console.log，但是当我运行脚本时我没有得到它，我只是在控制台上得到错误 这意味着您在加载图像之前运行脚本。在 onloadend 回调结束时运行您的脚本 我已经更新了我的代码： 现在显示console.log，但在它之前我有一个错误：Uncaught SecurityError: Blocked a frame with origin "null" from access a frame with origin"null"。协议、域和端口必须匹配。 【参考方案1】：您正在运行在加载图像之前查找图像元素的脚本，因此它尚未添加到 DOM。
将你的脚本移动到单独的函数中：
function yourScript()
var if1 = document.getElementById("ifrm");
var fc = (if1.contentWindow || if1.contentDocument);
var img1 = fc.document.getElementById("GraphImage");
console.log(img1.src);
并在 onloadend 回调结束时运行它：
function generatePNG (oViewer)
var oImageOptions =
includeDecoratorLayers: false,
replaceImageURL: true
;
var sResult = 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);
yourScript(); // your script is run after appending image to body
, "image/png", oImageOptions);
return sResult;
【讨论】：
但我的函数在 iframe 文件中： function onMyFrameLoad() var if1 = document.getElementById("ifrm"); var fc = (if1.contentWindow || if1.contentDocument); var img1 = fc.document.getElementById("GraphImage");控制台.log(img1.src); 当我将它添加到我的 editor.html 时出现错误：无法读取 null 文档，我需要从 iframe 访问 dom以上是关于Iframe Dom 错误：无法读取 null 的属性“src”的主要内容，如果未能解决你的问题，请参考以下文章
Chrome 中的 iframe 错误：无法从“窗口”读取“localStorage”：此文档的访问被拒绝
JS 编译时 React DOM 更新。但是刷新浏览器会给出错误'无法读取未定义的属性（读取'1'）'
未捕获的类型错误：无法读取 null 的属性（读取“添加”）
错误类型错误：无法在styles.css 中读取null 的属性（读取'classList'）