0

私はウィジェットを書いています：JavaScriptをロードしてからiframeを埋め込むので、ウィジェットで問題なく、CSSの問題もなくjQueryサポートを取得できます。

ウィジェットは次のようなサイトに埋め込まれています。

<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 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 に答える
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

iframe コンテンツをロードした後に iframe のサイズを変更するには、コードを document.load に配置する必要があります。 

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

iFrame に disqus コメントを読み込んで同じことをしました。注：オリジンポリシーが同じでないことを確認してください

于 2013-01-12T15:08:56.377 に答える
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 に答える