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?
1 answers
solution1
0 2015-12-15 10:37:40
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, ie access an element inside an iframe from outside the iframe, please read this answer:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.