Question

我正在编写一个小部件：加载JavaScript然后嵌入一个iframe，这样我就可以在没有问题的情况下获得jQuery支持，并且在小部件中没有CSS问题。

小部件嵌入到以下网站：

<script type="text/javascript">
var _sid = '1';
  (function() {
    var se = document.createElement('script'); se.type = 'text/javascript'; se.async = true;
    se.src = '//xxxxxxx.com/loader.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(se, s);
  })();
</script>

在loader.js内，我正在向页面写下以下代码：

<div id="lHB" style="margin: 0px; padding: 0px; border: 0px; background-color: transparent; overflow: hidden; position: fixed; z-index: 10000001; display: block; right: 0px; bottom: 0px; height: 28px; width: 240px; background-position: initial initial; background-repeat: initial initial;" class="_FloatingButton">
    <iframe id="_iframe" src="http://www.xxxxxxx.com/index.php" frameborder="0" style="background-color: #eee; vertical-align: text-bottom; overflow: hidden; position: relative; width: 100%; height: 100%; margin: 0px; z-index: 999999;">
    </iframe>
</div>

在我的index.php内部，我正在填充小部件内容，我使用jQuery执行此操作。我从iframe加载它的原因是为了确保我不会遇到CSS问题和jQuery冲突。

index.php包含：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"></head>
<body>
<script type="text/javascript">
var _sid = '1';
  (function() {
    var se = document.createElement('script'); se.type = 'text/javascript'; se.async = true;
    se.src = '//xxxxxxxxxx.com/hello.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(se, s);
  })();
</script>
</body>
</html>

hello.js动态加载小部件内容到index.php页面。一切都很好，唯一的问题是：

我想从height: 28px;更改loader.js（加载hello.js）。我试图找到

$('#_iframe', window.parent.document).css('height', 220);

但它找不到_iframe：/

任何想法我做错了什么？

Answer 1

如果我理解你的问题是正确的，那么我有一个同样的问题，就是让iframe动态地改变它的高度，包含页面。下面是我用来完成此任务的代码。

var iFrames = document.getElementsByTagName('iframe');

function iResize() {
  for (var i = 0, j = iFrames.length; i < j; i++) {
    iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';
  }
}
if ($.browser.safari || $.browser.opera) {
  $('iframe').load(function () {
    setTimeout(iResize, 1);
  });
  for (var i = 0, j = iFrames.length; i < j; i++) {
    var iSource = iFrames[i].src;
    iFrames[i].src = '';
    iFrames[i].src = iSource;
  }
} else {
  $('iframe').load(function () {
    this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
  });
}

当然，您可以将其从标记名称更改为元素ID。只需将其粘贴在包含iframe的首页上。

Answer 2

您需要将代码放在document.load中，以便在加载iframe内容后调整iframe大小：

$(document).load(function () {
    $('#_iframe', window.parent.document).css('height', 220);
});

我在iFrame中加载disqus注释时也做了同样的事情。注意：请确保您没有相同的原始政策

Answer 3

您可以在窗口小部件脚本中使用以下功能：

function resize_iframe() {
    var elem = window.parent.document.getElementById('my_ifrmae'),
        elem_height = $(document).height();
    $(elem).css({
    "height" : elem_height
    });
 }

现在您要做的就是在源脚本中的回调函数中调用上述函数。

希望这会有所帮助

Answer 4

我写了这个脚本，它对我来说非常合适。随意使用它！

function ResizeIframeFromParent(id) {
    if (jQuery('#'+id).length > 0) {
        var window = document.getElementById(id).contentWindow;
        var prevheight = jQuery('#'+id).attr('height');
        var newheight = Math.max( window.document.body.scrollHeight, window.document.body.offsetHeight, window.document.documentElement.clientHeight, window.document.documentElement.scrollHeight, window.document.documentElement.offsetHeight );
        if (newheight != prevheight && newheight > 0) {
            jQuery('#'+id).attr('height', newheight);
            console.log("Adjusting iframe height for "+id+": " +prevheight+"px => "+newheight+"px");
        }
    }
}

您可以在循环内调用该函数：

<script>
jQuery(document).ready(function() {
    // Try to change the iframe size every 2 seconds
    setInterval(function() {
        ResizeIframeFromParent('iframeid');
    }, 2000);
});
</script>

jQuery在动态编写的iframe上改变高度

4 个答案: