問題タブ [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 投票する
7 に答える
34047 参照

javascript - クロスドメイン iframe リサイザー?

コンテンツに基づいて高さを調整する、優れたクロスドメイン iframe のサイズ変更スクリプトを探しています。iframe のソースの html/css にもアクセスできます。そこに何かありますか?

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

jquery - iFrame ページのリロードでの iframe-resizer の変更

次の lib http://davidjbradshaw.github.io/iframe-resizer/を使用しています。これにより、ソース ページの後にクロス サイト iFrame のサイズを変更できます。

次の問題に遭遇しましたが、解決できません。

  1. ページを最初にロードするとき、iFrame の高さは適切です (ロードされたページ全体が iframe に表示されます)。しかし、リンクを押して、最初の (iFrame 内の) 高さよりも大きい別のサイトに移動すると、iFrame は変更されず、iFrame ページの下部は表示されません。どうすればこの問題が発生し、どうすれば解決できますか?

  2. 上記の問題とかなり似ています。「bodyMargin」コマンドで余白を設定しました。最初のページの読み込みが完了すると正常に動作しますが、iFrame にあるサイトのリンクをクリックすると、「bodyMargin」で設定されたマージンがクリアされ、サイトが元の状態になります。どうすればこれを解決できますか?

コード:

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

javascript - @davidjbradshaw の iframe resizer がモバイル ブラウザで正しく動作しない

@davidjbradshawの素晴らしい iframe リサイザーiframe テスト ページで使用しています。デスクトップ ブラウザー (テスト済みの Chrome、Safari、および Firefox) でページを読み込むと、画面の幅を小さくしておいても、読み込みとサイズ変更は問題なく行われるため、モバイル デバイスでも同じように応答すると思います。しかし、そうではありません。

iPhone でページを表示すると、幅が正しく収まるように変更されません。したがって、iframe を水平方向に拡張します。

奇妙なことに、私の iPhone で@davidjbradshaw のサンプル ページにアクセスすると、それらは完全に正常に動作し、本来すべきこと (幅のサイズ変更) を行っているように見えます。そうは言っても、ブートストラップなどを使用していることを考えると、彼の例はそれほど複雑ではありません。しかし、コードでJSエラーもまったく発生していません。

さらに、 iPhone で直接 iframe のソースに移動すると、適切に読み込まれ、幅とすべてがサイズ変更されます (twitter ブートストラップ 2.3.1 を使用しているため)。

はい、head.js の部分を削除し、iframeResizer.contentWindow.min.js読み込まれたスクリプトを</body>タグの前の下部と head に配置してテストしました。それらのどれも効果がないようです。

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

javascript - 外部ドメインから iframe の高さをリサイズ

このページhttp://test.atelier47.fr/iframe-resizer/example/iframe resizerからhttps://github.com/davidjbradshaw/iframe-resizerを使用していますが、高さが設定されていません。問題がありますか?

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

iframe-resizer - ネストされた iFrame、親のサイズ変更がバブルアップしない

私は次の構造を持っています:

広告は、ユーザーが広告を操作したときに、parentIFrame.size() メソッドを介して親 iFrame のサイズを変更するように設定されています。このパーツのセットアップが完了し、適切に動作しています。レベル 2 の iframe でインライン スタイル属性が変更されていることがわかります。

デモを見ると、ネストされた iFrame を連携させ、ネストされたレベル間でサイズを適切に調整できることがわかります。contentWindow と iFrameResize ファイルの両方を持つ中間レベルの iFrame をセットアップする必要があることがわかりました。

レベル 2 の iframe が機能し、適切にサイズ変更されていることを考えると、レベル 1 とレベル 2 の間の通信は適切に機能しており、問題はレベル 0 とレベル 1 の間のどこかにあると想定していますレベル 2 内でiFrameResize のログがオフになりました。

コンソールを表示すると、広告がレンダリングされると次のようになります。

次に、広告をクリックすると、次のように表示されます。

ログをセグメント化するために、レベル 2 からイベントをログに記録していることがわかります。レベル 2 の iFrame のサイズが変更された最後の部分ですが、レベル 1 の iFrame でサイズの変更が見られないのは、切断されている場所です。

レベル 0 には次のものがあります。

レベル 1 には次のものがあります (これは奇妙ですが、広告ネットワークには必要です... この部分は機能しています。完全を期すために提供しています):

レベル 2 には contentWindow スクリプトと parentIFrame.size() 呼び出しがあります。

ご協力いただきありがとうございます。