带有嵌套iframe的jQuery Auto Height iframe [英] Jquery Auto Height iframe with the nested iframe

问题描述

你好，我的页面上有一个iframe(嵌套)，嵌套的iframe加载了多个不同高度的页面，目前我正在使用对我有用的代码，但仅调整了嵌套页面的高度，但是我想调整两个iframe的大小(主iframe和自动在主iframe中使用的另一个iframe).我搜索了解决方案，但仍然没有成功，请帮助我

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

这是我在两个iframe中都使用的代码

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>

推荐答案

将JavaScript放在父页面中，而不是放在目标iframe中

我使用上面的代码在父页面和iframed子页面(包含嵌套的iframe)中测试了您的示例；两个iframe均按预期调整了大小.

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.

在上面的说明中，您说这是我在 iframe 中使用的代码" (强调)让我认为您在目标iframe中拥有代码，而不是每个目标iframe的父代码.

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.

<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>

---

外部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>

---

嵌套的iframe

<h1>Hello World</h1>

---

注意:您只能在相同域的iframe上执行此操作.它不适用于跨网域iframe.另外，如果您有权访问包括父页面在内的所有页面，那么我不建议您使用iframe加载相同域的内容；使用AJAX，或者使用基于jQuery AJAX的jQuery方法[ .ajax()， .get()， .load()]代替.

---

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.

这篇关于带有嵌套iframe的jQuery Auto Height iframe的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！