Jquery Auto Height iframe with the nested iframe

那年仲夏 提交于 2021-02-08 11:27:32

问题


Hello I have an iframe in my page which have another iframe in it (nested), the nested iframe loads multiple pages of different height currently i am using the code which works for me but only resize the height of the nested one but I want to resize both iframes (the Main iframe and the another iframe which is used in the main one automatically). I searched for the solution but still no success please help me

Here is the code which i am using in both iframe

<script language="javascript" type="text/javascript">

  function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';

  }

</script>

<iframe name="Stack" src="inline-main.php" frameborder="0" scrolling="no" id="iframe" onload='javascript:resizeIframe(this);' width="1060px">Browser not compatible.</iframe>

回答1:


Put JavaScript in parent page, not inside targeted iframe

I tested your example using the above code in the parent page and the iframed child page, which contains the nested iframe; Both iframes resized as expected.

In your explanation above, you say "Here is the code which i am using in both iframe" (emphasis added), which leads me to think that you have the code inside the targeted iframes, instead of the parent of each targeted iframe.

Below are the basic contents needed in each page:


Parent Page

<script language="javascript" type="text/javascript">
function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
<iframe src="iframe.html" frameborder="0" scrolling="no" onload='javascript:resizeIframe(this);'>Browser not compatible.</iframe>

Outer iframe

<script language="javascript" type="text/javascript">
function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
<iframe src="nested-iframe.html" frameborder="0" scrolling="no" onload='javascript:resizeIframe(this);'>Browser not compatible.</iframe>

Nested iframe

<h1>Hello World</h1>

NOTE: You can only do this on iframes from the same domain. It will not work on cross-domain iframes. Also, if you have access to all of the pages including the parent page, then I wouldn't suggest using iframes for the loading of same-domain content; use AJAX or, if available, a jQuery AJAX-based method [.ajax(), .get(), .load()] instead.



来源:https://stackoverflow.com/questions/23484485/jquery-auto-height-iframe-with-the-nested-iframe

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!