問題タブ [iframe-resizer]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
1 に答える
261 参照

iframe-resizer - iframe-resizer でビューポートの寸法を取得する

iframe コンテンツ内からビューポートの幅/高さを判断するのに問題があることを除いて、iframe-resizer はうまく機能しています。を呼び出すことができることがわかりましparentIFrame.getPageInfo(callback)たが、返されるオブジェクトは次のようになります。

ウィンドウのビューポートの幅/高さになると予想clientWidthしていました。私のブラウザウィンドウの高さは約1000pxですが、正しいように見えますが、のように見えます。clientWidth/clientHeight の意味を誤解していますか、それとも間違っていますか?clientHeightclientWidthclientHeightiframeHeight + offsetTop + 1px

0 投票する
1 に答える
109 参照

iframe-resizer - Iframe-Resizer のスローダウンの原因となる Google Analytics トラッキング コード?

ページに表示する必要がある動的コンテンツを含む iframe があり、できるだけ早く表示したいと考えています。ただし、iframe のコンテンツが読み込まれてからホスト ページで iframe のサイズが変更されるまでの間には、多少のタイムラグがあるようです。現在、iframe の初期サイズは高さ = 0、幅 = 100% であるため、コンテンツが iframe に読み込まれると、iframe-resizer が自動的に正しい高さに調整します。

ただし、iframe 内に自動再生ビデオがある場合、iframe のサイズが変更される 1 分前まで音声が聞こえることに気付きました。ブラウザー コンソールを確認すると、iframe-resizer が応答しないという警告メッセージが表示されますが、1 分ほどすると iframe のサイズが変更され、コンテンツが表示されます。

iframe コンテンツ内に Google アナリティクス トラッキング コードがあり、それを削除すると、iframe-resizer の応答性が大幅に向上し、コンテンツの読み込みが速くなることに気付きました。内部で実行されている Google アナリティクス トラッキング コードで iframe をレスポンシブに動作させるにはどうすればよいですか? GA スクリプトの読み込みが完了する前に iframe-resizer を機能させるにはどうすればよいですか?

また、初期の iframe の高さを 0 に設定してから、iframe-resizer が動的な iframe コンテンツを最初にロードする適切な方法でフレームのサイズを変更できるようにしていますか?

編集(コードの追加):ホストページで実行するコードは次のとおりです

すべての動作を確認したい場合は、このjsfiddleをチェックしてください。

現在、initCallback と resizedCallback で読み込み中の gif を非表示にする同じコードがあります。これは、gif が常に initCallback によって非表示になるとは限らないためです。