How to update iframe side when some link in the iframe is clicked?
Question
I have the following code, which resize the IFrame depending on the Size of the IFrame Content:
<html>
<head>
<title></title>
</head>
<body>
<iframe src="http://page.html"
id="iframeid" width="600" height="700" scrolling="no" onload="setIframeHeight(this.id)"></iframe>
<script>
function setIframeHeight(id) {
var ifrm = document.getElementById(id);
var doc = ifrm.contentDocument? ifrm.contentDocument:ifrm.contentWindow.document;
ifrm.style.height = "10px";
ifrm.style.height = getDocHeight(doc) + 4 +"px";
}
function getDocHeight(doc){
doc = doc || document;
var body = doc.body; html = doc.documentElement;
var height =Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
return height;
}
$('iframe').css('height', $('iframe body').height() + 'px');
</script> </body> </html>
This works fine. The IFrame size is set depending on the size of the imported site
http//:page.html
The problem is that when http//:page.html contains links. When this link is clicked, the iframe size is not updated.
Question is: How to update the iframesize when a link is clicked?
1 answers
solution1
1 ACCPTED 2014-11-10 03:59:01
Add an event listener for loads in the iframe to fire your function:
$("iframe").on("load", function() {
setIframeHeight(id);
});
This should work as long as the iframe URL is the same domain as the parent document. If it's not you'll probably run into browser security restrictions which will cause this to fail.
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.