Question

我已将HTML页面插入iframe：

<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，并从image.src获取edtior.html。我怎么能这样做？

Answer 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访问DOM

1 个答案: