検索
ホームページウェブフロントエンドCSSチュートリアルクロスドメイン iframe から計算されたスタイルを取得するにはどうすればよいですか?

How Can I Retrieve Computed Styles from a Cross-Domain Iframe?

クロスドメイン iframe から計算されたスタイルを取得する

この記事では、別のドメインにある iframe 内の HTML 要素の計算されたスタイルを取得することに焦点を当てます。目標は、ブラウザが計算して使用する高さや幅などの特定の CSS プロパティを取得することです。

計算されたスタイルにアクセスするには、次を利用できます:

IE 以外のブラウザ

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

このスクリプトは、計算された要素の高さを返します。あるいは、以下を使用することもできます。

window.getComputedStyle(document.getElementById("frameId"), null).getPropertyCSSValue("height").cssText

IE

element.currentStyle

このメソッドは、指定された要素の現在のスタイル オブジェクトを返します。

クロスドメインの考慮事項

クロスドメイン制限により iframe に直接アクセスできないため、必要な要素にアクセスする別の方法を見つける必要があります。これを行うには、iframe のドキュメントの DOM を操作します。

ターゲット要素の選択

目的の要素を選択するには、次のコマンドを使用できます:

document.getElementById("frameId").contentDocument.getElementById("brshtml")

これは、iframe のドキュメントの head 要素の ID が「brshtml」であることを前提としています。

以上がクロスドメイン iframe から計算されたスタイルを取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
ウェブサイトを立ち上げるための初心者の旅ウェブサイトを立ち上げるための初心者の旅Apr 18, 2025 am 10:20 AM

2018年9月、私はWeb開発を学ぶ旅のほんの数ヶ月でした。私が多くの新しい開発者の場合は確かにそうであるように、それは大きな仕事でした

すべての新しいES2019のヒントとトリックすべての新しいES2019のヒントとトリックApr 18, 2025 am 10:19 AM

ECMAScript標準は、ES2019に新機能を追加することで再び更新されました。現在、ノード、Chrome、Firefox、Safariで正式に利用可能になりました

コイルによるサイト収益化(およびサポーターの広告を削除)コイルによるサイト収益化(およびサポーターの広告を削除)Apr 18, 2025 am 10:13 AM

私は、過去に「マイクロペイメント付きのヒント」に基づいて、少数のウェブサイトを試しました。彼らは行き来します。それは大丈夫です。出版社の観点から、それは' sです

応答性のあるiframes応答性のあるiframesApr 18, 2025 am 10:10 AM

これは、WebサイトでIFRAMEをレスポンシブにするために必要なすべてのことです。それは見た目よりも難しい' CSSは間違いなく関与しています。

CSS-in-jsの違いCSS-in-jsの違いApr 18, 2025 am 10:07 AM

一部の人々は、CSS-in-jsの考えを完全に嫌います。ちょうどその名前は攻撃的です。ハードいいえ。スタイリングはJavaScriptに属していません、それはCSSに属しています。

Google PagesSpeedの仕組み:スコアと検索エンジンのランキングを改善するGoogle PagesSpeedの仕組み:スコアと検索エンジンのランキングを改善するApr 18, 2025 am 10:03 AM

この記事では、PageSpeedがクリティカルスピードスコアの計算方法を明らかにします。速度が収益を上げ、放棄率を下げる上で重要な要因になったことは秘密ではありません。 Googleがランキングファクターとしてページ速度を使用しているので、多くのOrga

SVGでリアルなガラス効果を発揮しますSVGでリアルなガラス効果を発揮しますApr 18, 2025 am 10:01 AM

私はSVGが大好きです。確かに、コードは最初は密度が高く困難に見えることがありますが、それを知ると、結果の美しさがわかります。ボーナスはです

毎週のプラットフォームニュース:画像が画像要素でロードされるのを防ぐ、私たちが望むWeb、SVGスタイルはスコープされていません毎週のプラットフォームニュース:画像が画像要素でロードされるのを防ぐ、私たちが望むWeb、SVGスタイルはスコープされていませんApr 18, 2025 am 09:57 AM

今週のブラウザニュースの週の週のまとめ、画像要素を条件に画像をロードするためのトリック、あなたのチャンスはクッパのベンダーに伝えます

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

PhpStorm Mac バージョン

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール