Javascript Iframe Dom错误：无法读取属性"；src"；空的

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

  <iframe name= "iframeEditor" id="ifrm" src="editor.html" width="1000" height="500" frameborder="0"></iframe>

然后，我必须在我的“editor.html”中访问脚本应答器中的一个元素：

图解
函数生成器ng（oViewer）{
var oImageOptions={
包括生态层：假，
replaceMageURL:true
}; 
var sResult=oViewer.generateImageBlob（函数（sBlob）{
b=64；
var reader=new window.FileReader（）；
reader.readAsDataURL（sBlob）；
reader.onloadend=函数（）{
base64data=reader.result；
var image=document.createElement（'img'）；
setAttribute（“id”、“GraphImage”）；
image.src=base64data；
document.body.appendChild（图像）；
} 
}，“图像/png”，oImageOptions）；
返回sResult；
} 

我应该从包含我的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>

var if1=document.getElementById（“ifrm”）；
var fc=（if1.contentWindow | | if1.contentDocument）；
var img1=fc.document.getElementById（“GraphImage”）；
console.log（img1.src）；

---

但我得到一个错误：无法读取null的属性“src”

您正在运行一个脚本，该脚本在加载图像之前查找图像元素，因此它尚未添加到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; 
    } 

---

是否确实在加载映像后运行脚本？在onloadend回调中添加一些console.log，并检查是否在出错之前调用它。我在onloadend回调中添加了console.log，但是当我运行脚本时，我没有得到它，我只是在控制台上得到错误，这意味着您正在加载映像之前运行脚本。在onloadend回调结束时运行脚本我已经更新了代码：函数onMyFrameLoad（）{alert（'myframe已加载'）；var if1=document.getElementById（“myframe”）；var fc=（if1.contentWindow | | if1.contentDocument）；var img1=fc.document.getElementById（“GraphImage”）；console.log（img1.src）；}；现在显示console.log，但在此之前我有一个错误：Uncaught SecurityError：阻止原点为“null”的帧访问原点为“null”的帧。协议、域和端口必须匹配。但我的函数在iframe文件中：function onMyFrameLoad（）{var if1=document.getElementById（“ifrm”）；var fc=（if1.contentWindow | | if1.contentDocument）；var img1=fc.document.getElementById（“GraphImage”）；console.log（img1.src）；}当我将它添加到我的editor.html时，我得到了一个错误：无法读取null的文档，我需要从iframe访问dom

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; 
    }