Access DOM from iFrame

Question

I have inserted a HTML page into an iframe:

<iframe src="file:///C:/editor.html" width="1000" height="500" frameborder="0"></iframe>

Now I need to access to the DOM from the iframe and get an element by id.

This is my 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>

I need to access the DOM from the iframe, and get image.src from my edtior.html. How can I do this?

score 0 · Answer 1 · edited May 23 '17 at 11:52

0

Use window.parent or window.top to access the parent/primary frame window. Then you can get their elements with

window.parent.document.getElementById("id")

and so on.

So you can have in iframe.html:

<html><body>
<script>
     var getDiv = function(){
         return window.parent.document.getElementById("test");
     }
</script>
</body></html>

And a page containing it:

<html><body>
<div id="test"></div>
<iframe src="#####/iframe.html"></iframe>
</html></body>

Now calling getDiv() inside the iframe will fetch you the div[id=test] inside the parent frame.

If you want to do the opposite, i.e. access an element inside an iframe from outside the iframe, please read this answer:

Javascript - Get element from within an iFrame

edited May 23 '17 at 11:52

Community

1
1

answered Dec 15 '15 at 10:37

Michal Paszkiewicz

573
7
21

i'm getting null when i'm using this code : – ameni Dec 15 '15 at 11:12
I assumed you were trying to get an image from outside of the iframe inside the iframe. Inside your iframe code (editor.html) you can access the DOM containing the `editor.html` iframe using `window.parent`. In the code you just pasted, your script tag is not inside your editor.html code. – Michal Paszkiewicz Dec 15 '15 at 11:59
what i'm trying to do is to create a javascript function that allow me to access the dom from iframe that contain my editor.html. i need an example please – ameni Dec 15 '15 at 12:06
I have updated the answer, giving an example. Hope it helps. – Michal Paszkiewicz Dec 15 '15 at 12:37
what i'm trying to do is to access to **image.src** which is in my editor.html, and this using the iframe that contain my editor.html – ameni Dec 15 '15 at 13:49
i get error "cannot read property src of null" when i try with this code :var iframe = document.getElementById('ifrm'); // var innerDoc = iframe.contentDocument || iframe.contentWindow.document; var innerDoc = iframe.contentWindow.document; var a = innerDoc.getElementById("GraphImage").src; – ameni Dec 15 '15 at 14:03
most likely that code runs before the iframe document completes loading, meaning the item will not yet exist. – Michal Paszkiewicz Dec 15 '15 at 14:59
try `iframe.onload = function(){ /* put your code in here */ }` – Michal Paszkiewicz Dec 15 '15 at 15:06
– ameni Dec 15 '15 at 15:11
i update the code but i have this erro with the onload function : Uncaught SecurityError: Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match. – ameni Dec 15 '15 at 15:33
I have solved your original issue, this is now a completely seperate issue. Please read this: http://stackoverflow.com/questions/25098021/securityerror-blocked-a-frame-with-origin-from-accessing-a-cross-origin-frame – Michal Paszkiewicz Dec 15 '15 at 15:46
thank you i solved this problem, but i still have error cannot read src of null – ameni Dec 15 '15 at 16:12

Access DOM from iFrame

1 Answers1