I have a page with an iframe. The iframe contents sometimes do dynamic JS things that cause them to grow. When thta happens, I have to resize the iframe to make sure it's long enough, which I do with this, inside the iframe:
// I saved you the boredom of all the try{}s and != nulls, this is just the meat.
document.parentWindow.parent.reSize();
And this, which is in the parent html:
function reSize()
{
try
{
var oBody = ifrm.document.body;
var oFrame = document.all('ifrm');
oFrame.style.height = oBody.scrollHeight + (oBody.offsetHeight - oBody.clientHeight) + 100;
}
//An error is raised if the IFrame domain != its container's domain
catch(e) { }
}
However, calls to this are littered all over, in every place where resizing might have happened. Is there anywhere I can put this such that it is "automatic"? Some event I can trigger off of or something?
Relevant links:
Place this code right above the closing body tag of the parent window. place your iframe resizing code where commented.
OLD CODE:
<script>
var intWinHeight = (typeof window.innerHeight != 'undefined' ? window.innerHeight : document.body.offsetHeight);
var resizeIframe = function() {
var newWinHeight = (typeof window.innerHeight != 'undefined' ? window.innerHeight : document.body.offsetHeight);
if(newWinHeight != intWinHeight) {
intWinHeight = newWinHeight;
// execute your Iframe resizing code here
}
}
setInterval(resizeIframe, 100);
</script>
NEW CODE:
<script type="text/javascript">
var iFrameId = document.getElementById('myIframe');
var intWinHeight = (typeof window.innerHeight != 'undefined' ? window.innerHeight : document.body.offsetHeight);
var intIframHeight = (typeof iFrameId.contentWindow.window.innerHeight != 'undefined' ? iFrameId.contentWindow.window.innerHeight : iFrameId.contentWindow.document.body.offsetHeight);
function exeResizeIframe() {
var newWinHeight = (typeof window.innerHeight != 'undefined' ? window.innerHeight : document.body.offsetHeight);
var newIframHeight = (typeof iFrameId.contentWindow.window.innerHeight != 'undefined' ? iFrameId.contentWindow.window.innerHeight : iFrameId.contentWindow.document.body.offsetHeight);
if((newWinHeight != intWinHeight) || intIframHeight != newIframHeight) {
intWinHeight = newWinHeight;
intIframHeight = newIframHeight;
// execute your Iframe resizing code here
}
}
setInterval("exeResizeIframe()", 100);
</script>
Please note, change the iframe ID due to security restrictions in IE < 9 only local paths will work in the ifram src
You can trigger a custom event after doing the "dynamic JS things." Elsewhere, attach just a single listener whose callback executes the document.parentWindow.parent.reSize();
.
Further reading:
也许在父窗口中绑定一个调整iframe大小的事件,并在动态js使其增长时触发它(从iframe内容触发它。看看这篇文章: http : //forum.jquery.com/topic/trigger-from -iframe到父窗口
This code seems to be working, on Firefox, Chrome 16, and IE 8, at least. It is derived from @TimWickstrom.com's answer, but with the outer-frame stuff removed and some modifications to height calculations:
<iframe id='ifrm' width='100%' scrolling='no' ...>
var iFrame = document.getElementById('ifrm');
function stateChange(){ if (obj.readyState=='loading') { scroll(0,0); } }
iFrame.onreadystatechange='stateChange()';
var iFrameHeight = -1;
function resizeIframe() {
var iFrameBody = typeof iFrame.contentDocument != 'undefined' ? iFrame.contentDocument.body : iFrame.contentWindow.document.body;
if (iFrameBody == null) return;
var newiFrameHeight = typeof window.innerHeight != 'undefined' ? iFrameBody.scrollHeight : (iFrameBody.scrollHeight + iFrameBody.offsetHeight - iFrameBody.clientHeight);
if(iFrameHeight != newiFrameHeight) {
iFrameHeight = newiFrameHeight;
iFrame.style.height = newiFrameHeight;
}
}
iFrame.onload = function() { setInterval('resizeIframe()', 100); }
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.