1

iframe を通してのみ表示できるサイトを構築しています。自動リサイズの高さを調整できるスクリプトも追加しました。

しかし、私のブログを読み込んでいるので、一度に 2 つのページを読み込まなければならないという追加の重みがあります。対処するために、OnClick を適用して iframe を読み込みます。

自動サイズ変更しかし、うまくいかないことが判明しました。

iframe コードをロードします。

<script type="text/javascript">
function okeBos() {
document.getElementById("iframeControl").innerHTML='<iframe scrolling="no" src="http://name-domain.com" style="border: 0; width: 100%;"></iframe>';document.getElementById("starApps").style.display="none";
};
</script>

<div id="iframeControl"></div><div id="starApps"><span onclick="okeBos()">Load Iframe</span></div>

このようなトリックのために自動サイズ変更を行う方法を知っていますか? 助けてください、ありがとう..

編集

次のコード スニペット Resize My

読み込まれたサイトに保存されます:

<script src='http://britha.com/Upload/MyFile/iframeResizer.contentWindow.min.js' type='text/javascript'></script>
<script>
    var iFrameResizer = {
        messageCallback: function(message){
        }
    }
</script>

iframe を含むサイトに保存:

<script src="http://britha.com/Upload/MyFile/iframeResizer.js" type="text/javascript"></script>
<script type="text/javascript">
    iFrameResize({
        log                     : true,
        enablePublicMethods     : true,
        enableInPageLinks       : true,
    });
</script>
4

1 に答える 1

0

アップデート

iframe について私が知っていることは、通常、それらは DOM で最後に読み込まれるため、遅延が発生することを予期する必要があるということです。通常の方法で（つまり、マークアップ（HTML）で）iframeを正常にロードできるかどうかを尋ねることを怠っていました。とにかく、iframe-resizer プラグインによって認識されないため、iframe を通常の方法でロードすることを強くお勧めします。2 つのページ間で調整し、計算し、調整する必要があるため、読み込み時間を考慮に入れる必要があると確信しています。ユーザーがボタンを押すことを決定するたびにポップアップする iframe は、コンピューターで 5 年ほどかかります (科学的な事実ではなく、単なる誇張です)。

私は Plunker を作成し、このリポジトリで提供されている例を使用し、独自のテストもいくつか追加しました。最も重要なコードは次のとおりです。

親ページ

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/iframe-resizer/3.5.3/iframeResizer.min.js"></script>
<script>
iFrameResize({options});

子ページ

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/iframe-resizer/3.5.3/iframeResizer.contentWindow.min.js"></script>
<script>

最も重要: IFRAME を動的に作成しないでください

プランカー

年

うまくいかない理由を教えてください。これはこのスニペットで機能します...自動サイズ変更スクリプトがない場合、何を修正すればよいかをどのように知ることができますか?

スニペット

<script>
  
function okeBos() {
   document.getElementById("iframeControl").innerHTML='<iframe scrolling="no" src="http://name-domain.com" style="border: 0; width: 100%;"></iframe>';
  
    document.getElementById("starApps").style.display="none";
};
  
</script>

<div id="iframeControl"></div>

<div id="starApps">
  <span onclick="okeBos()">Load Iframe</span>
</div>

于 2016-04-30T17:32:48.900 に答える