Question

我使用以下代码将我的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>

但我收到错误：无法读取属性“src”为null

Answer 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 Dom错误：无法读取null的属性“src”

1 个答案: