0

我正在编写一个小部件：用 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：/

任何想法我做错了什么？

4

4 回答 4

0

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

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>
于 2013-10-11T07:12:22.073 回答
0

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

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

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

于 2013-01-12T15:08:56.377 回答
0

如果我正确理解你的问题，我有同样的问题，让 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 的首页上即可。

于 2013-01-12T15:00:26.907 回答
0

您可以在小部件脚本中使用以下函数：

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

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

希望这会有所帮助

于 2013-01-13T11:42:01.400 回答