Iframe Dom 错误：无法读取 null 的属性“src”答案

【问题标题】：Iframe Dom error :cannot read property "src" of nullIframe Dom 错误：无法读取 null 的属性“src”
【发布时间】：2016-03-21 09:52:45
【问题描述】：

我使用以下代码将 editor.html 放入 iframe 中：

  <iframe name= "iframeEditor" id="ifrm" src="editor.html" width="1000" height="500" 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"。协议、域和端口必须匹配。

标签： javascript jquery html dom iframe

【解决方案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