【问题标题】:Iframe-resizer change on iFrame page reloades重新加载 iFrame 页面上的 iframe-resizer 更改
【发布时间】:2014-06-24 12:26:27
【问题描述】:

我正在使用以下库 http://davidjbradshaw.github.io/iframe-resizer/,它可以在源页面之后调整跨站点 iFrame 的大小。

虽然我遇到了以下问题,但我无法解决:

  1. 第一次加载页面时,iFrame 的高度是正确的(整个加载的页面都在 iframe 中看到)。但是,当按下链接并转到另一个具有更大高度的站点时,第一个(在 iFrame 中)iFrame 不会改变,并且 iFrame 页面的底部也不会显示。这是怎么发生的,我该如何解决?

  2. 与上述问题非常相似。我通过“bodyMargin”命令设置了边距。当第一个页面加载完成时它工作正常,但是当单击 iFrame 中网站上的链接时,“bodyMargin”中设置的边距会清除,并且网站会恢复到原来的状态。我该如何解决这个问题?

代码:

<? php
/*
Template Name: iFrame
*/

get_header(); ?> <script type ="text/javascript"
src="<?php echo get_template_directory_uri(); ?>/js/iframeResizer.min.js"></script> 
<script language="javascript" type="text/javascript">
  function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
  }
</script>

<iframe src="http: //xxxxxxxxx.com/" id="iframe" width="100%" scrolling="no"></iframe>

<script type ="text/javascript">
iFrameResize({
    log: true, // Enable console logging
    enablePublicMethods: true, // Enable methods within iframe hosted page
    resizedCallback: function (messageData) { // Callback fn when resize is received
        $('p#callback').html(
            '<b>Frame ID:</b> ' + messageData.iframe.id +
            ' <b>Height:</b> ' + messageData.height +
            ' <b>Width:</b> ' + messageData.width +
            ' <b>Event type:</b> ' + messageData.type);
    },
    messageCallback: function (messageData) { // Callback fn when message is received
        $('p#callback').html(
            '<b>Frame ID:</b> ' + messageData.iframe.id +
            ' <b>Message:</b> ' + messageData.message);
        alert(messageData.message);
    },
    closedCallback: function (id) { // Callback fn when iFrame is closed
        $('p#callback').html(
            '<b>IFrame (</b>' + id +
            '<b>) removed from page.</b>');
    },
    bodyMargin: '-200px 0 0 -25px',
});
</script>

<?php
get_footer(); 
?>

【问题讨论】:

    标签: jquery iframe iframe-resizer


    【解决方案1】:

    如果您的 iFrame 移动域,您需要将 checkOrigin 选项设置为 false。

    https://github.com/davidjbradshaw/iframe-resizer#checkorigin

    【讨论】:

      猜你喜欢
      • 2012-04-15
      • 1970-01-01
      • 2014-09-23
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-10-12
      • 1970-01-01
      • 2011-12-20
      相关资源
      最近更新 更多