从 iFrame 访问 DOM答案

【问题标题】：Access DOM from iFrame从 iFrame 访问 DOM
【发布时间】：2016-03-21 02:22:10
【问题描述】：

我在iframe 中插入了一个 HTML 页面：

<iframe src="file:///C:/editor.html" width="1000" height="500" 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。我该怎么做？

【问题讨论】：

标签： javascript jquery html dom iframe

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