クロスドメイン IFrame 要素の計算されたスタイル (高さと幅など) にアクセスするにはどうすればよいですか?

クロスドメインの計算スタイルへのアクセス

Web 開発では、クロスドメイン要素から計算スタイルを取得することが課題となる場合があります。この例では、別のドメインから iframe 内の要素の高さと幅の計算されたスタイルを取得することを目的としています。

アプローチ

この計算されたスタイルにアクセスするにはシナリオでは、次のことを考慮してくださいアプローチ:

• window.getComputedStyle() WebKit ブラウザの場合:

  1. WebKit ブラウザ (Safari や Chrome など) はウィンドウを提供します.getComputedStyle()

  2. 次のように使用できます:

     window.getComputedStyle(document.getElementById("frameId"), null).getPropertyValue("height");

  3. これは、計算されたスタイル値 (例: "1196px") を返します。

• element.currentStyle のIE:

  1. Internet Explorer は、element.currentStyle プロパティを使用して、計算されたスタイルにアクセスします。

  2. 使用例:

     document.getElementById("frameId").currentStyle.height;

  3. element.currentStyle は要素に明示的に設定されたスタイルのみを反映し、計算されたスタイルは反映されないことに注意してください

• iFrame の DOM への移動:

  1. iframe のコンテンツの計算されたスタイルにアクセスする必要がある場合 (例: HTML 要素)、iFrame に移動できます。 DOM。
  2. iframeObject.contentDocument.documentElement を使用して、iFrame のドキュメントのルート要素にアクセスします。
  3. その後、window.getComputedStyle() または element.currentStyle を iframe 内の適切な要素に適用できます。 DOM.

例

提供したコードを使用して、HTML の高さで計算されたスタイルを取得する方法の例を次に示します。 iframe内の要素を使用してwindow.getComputedStyle():

window.getComputedStyle(document.getElementById("frameId").contentDocument.documentElement, null).getPropertyValue("height");

追加メモ

• 要素の選択を容易にするために、iframe に id 属性があることを確認してください。
• スクリーンショットで指定された高さと幅の値はピクセル単位で表示されますが、実際の環境で単位を確認することが重要です。シナリオ。

以上がクロスドメイン IFrame 要素の計算されたスタイル (高さと幅など) にアクセスするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。