iframe 要素はドキュメント內(nèi)のドキュメントです。
ウィンドウ オブジェクト: ブラウザーは、HTML ドキュメントを開(kāi)くときに、対応するウィンドウ オブジェクトを作成します。ただし、ドキュメントで 1 つ以上のフレームが定義されている場(chǎng)合 (つまり、1 つ以上のフレームまたは iframe タグが含まれている場(chǎng)合)、ブラウザは元のドキュメントのウィンドウ オブジェクトを作成し、さらに iframe ごとに追加のウィンドウ オブジェクトを作成します。元のウィンドウの子ウィンドウ。
contentWindow: 指定された iframe または iframe が配置されているウィンドウ オブジェクトを參照します
Demo1
親ページ fu.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>父頁(yè)面</title>
</head>
<body>
<input type=button value="調(diào)用子頁(yè)面中的函數(shù)childSay函數(shù)" onclick="callChild()">
<iframe id="myFrame" src="zi.html"></iframe>
<script type="text/javascript">
function parentSay() {
alert("我是父頁(yè)面中的方法");
}
function callChild()
{
document.getElementById("myFrame").contentWindow.childSay();
}
</script>
</body>
</html>子ページ zi.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>子頁(yè)面</title>
</head>
<body>
<input type=button value="調(diào)用父頁(yè)面中的parentSay()函數(shù)" onclick="callParent()">
<script type="text/javascript">
function childSay()
{
alert("我是子頁(yè)面的say方法");
}
function callParent() {
parent.parentSay();
}
</script>
</body>
</html>Demo2
親ページ iframe1.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>父頁(yè)面與子頁(yè)面之間的調(diào)用</title>
</head>
<body>
<iframe src="http://localhost/iframe/iframe3.html" id="iframe3"></iframe>
<iframe src="http://localhost/iframe/iframe2.html" id="iframe2"></iframe>
<div>我是父頁(yè)面</div>
<script type="text/javascript">
var iframe2=document.getElementById('iframe2');
iframe2.onload=function(){//父頁(yè)面調(diào)用子頁(yè)面中的方法
iframe2.contentWindow.b();
};
function test2() {
console.log("我是父頁(yè)面中的方法，在子頁(yè)面中調(diào)用的");
return iframe2;
}
</script>
</body>
</html>子ページ iframe2.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>子頁(yè)面</title>
</head>
<body>
<div id="test">aaa</div>
<div>子頁(yè)面</div>
<script type="text/javascript">
//子頁(yè)面iframe2.html調(diào)用父頁(yè)面iframe1.html的函數(shù):
parent.test2();
function b(){
console.log("我是子頁(yè)面iframe2");
}
function c() {
console.log("iframe3頁(yè)面調(diào)用iframe2頁(yè)面");
}
</script>
</body>
</html>サブページ iframe3.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>iframe3</title>
</head>
<body>
<script type="text/javascript">
var iframe2=parent.test2();
iframe2.contentWindow.c();//iframe3調(diào)用iframe2中的方法
</script>
</body>
</html>Demo2 では、サブページ間の相互呼び出しも実裝しています。
ホットAIツール
Undress AI Tool
脫衣畫(huà)像を無(wú)料で
Undresser.AI Undress
リアルなヌード寫(xiě)真を作成する AI 搭載アプリ
AI Clothes Remover
寫(xiě)真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無(wú)料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡(jiǎn)単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無(wú)料のコードエディター
SublimeText3 中國(guó)語(yǔ)版
中國(guó)語(yǔ)版、とても使いやすい
ゼンドスタジオ 13.0.1
強(qiáng)力な PHP 統(tǒng)合開(kāi)発環(huán)境
ドリームウィーバー CS6
ビジュアル Web 開(kāi)発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
HTML で IFrame をトリミングするにはどうすればよいですか?
Aug 29, 2023 pm 04:33 PM
インラインフレームはHTMLではiframeと呼ばれます。ラベルは、ブラウザがスクロール バーや枠線を使用してさまざまなドキュメントを表示できる、コンテンツ內(nèi)の長(zhǎng)方形の領(lǐng)域を指定します?，F(xiàn)在の HTML ドキュメント內(nèi)に別のドキュメントを埋め込むには、インライン フレームを使用します。要素への參照は、HTMLiframe name 屬性を使用して指定できます。 JavaScript では、要素への參照も name 屬性を使用して行われます。 iframe は基本的に、現(xiàn)在表示されている Web ページ內(nèi)に Web ページを表示するために使用されます。 iframe を含むドキュメントの URL は、「src」屬性を使用して指定されます。構(gòu)文 以下は HTML <iframesrc="URL"title="d の構(gòu)文です。
iframe の読み込みが遅いのはなぜですか?
Aug 24, 2023 pm 05:51 PM
iframe の読み込みが遅い原因には、主にネットワーク遅延、リソース読み込み時(shí)間の長(zhǎng)さ、読み込み順序、キャッシュ メカニズム、セキュリティ ポリシーが含まれます。詳細(xì)な紹介: 1. ネットワーク遅延: ブラウザーが iframe を含む Web ページを読み込むとき、iframe 內(nèi)のコンテンツを取得するためにサーバーにリクエストを送信する必要があります。ネットワーク遅延が大きい場(chǎng)合、コンテンツの取得に時(shí)間がかかります。 ; 2. リソースの読み込み時(shí)間が長(zhǎng)い場(chǎng)合、リソースのサイズが大きい場(chǎng)合、またはサーバーの応答時(shí)間が長(zhǎng)い場(chǎng)合、読み込み速度はより明らかに遅くなります; 3. 読み込みシーケンス、等
iframe に代わるテクノロジーは何ですか
Aug 24, 2023 pm 01:53 PM
iframe を置き換えることができるテクノロジには、Ajax、JavaScript ライブラリまたはフレームワーク、Web コンポーネント テクノロジ、フロントエンド ルーティング、サーバー側(cè)レンダリングなどがあります。詳細(xì)な紹介: 1. Ajax は、動(dòng)的な Web ページを作成するために使用されるテクノロジです。ページ全體を更新することなく、バックグラウンドでサーバーとデータをやり取りすることでページの非同期更新を?qū)g現(xiàn) Ajaxを使用することでより柔軟にコンテンツを読み込んで表示できるほか、他のページを埋め込むためにiframeを使用する必要もありません 2. JavaScriptライブラリまたは React などのフレームワーク。
iframe の data-id は何を意味しますか?
Aug 28, 2023 pm 02:25 PM
iframe の data-id は、特定の要素の識(shí)別子を格納するために HTML タグで使用されるカスタム屬性を指します。 data-id 屬性を使用すると、iframe 要素に一意の識(shí)別子を追加して、JavaScript で操作およびアクセスできるようにすることができます。 data-id 屬性の命名は、特定のニーズに応じてカスタマイズできますが、一意性と読みやすさを確保するために、通常はいくつかの命名規(guī)則に従います。 data-id 屬性を使用して、特定の iframe を識(shí)別および操作することもできます。
iframeの読み込みイベントとは何ですか?
Aug 28, 2023 pm 01:55 PM
iframe の読み込みイベントには、onload イベント、onreadystatechange イベント、onbeforeunload イベント、onerror イベント、onabort イベントなどが含まれます。詳細(xì)説明: 1. onload イベント、iframe のロード後に実行される JavaScript コードを指定、2. onreadystatechange イベント、iframe の狀態(tài)が変化したときに実行される JavaScript コードを指定、など。
iframe の危険性とは
Sep 08, 2023 pm 03:14 PM
iframe の危険性は主に次のとおりです: 1. セキュリティの脆弱性: 悪意のある Web ページが iframe 経由で他の Web ページをロードし、攻撃を?qū)g行する可能性がある; 2. 同一オリジン ポリシーの突破: iframe で他のドメイン名で Web ページをロードすることにより、同じ -オリジンポリシーが侵害される可能性があるクロスドメイン通信を?qū)g現(xiàn)するための戦略（悪意のある攻撃を受ける可能性がある）、3. コード実行の問(wèn)題、iframe にロードされた Web ページで JS コードが実行される可能性があり、セキュリティ上の問(wèn)題が発生する可能性がある、4. SEO の問(wèn)題、検索エンジンiframe などを介して読み込まれたコンテンツを正しく解析してインデックスを作成できない場(chǎng)合があります。
Python での iframe とは何ですか?
Aug 25, 2023 pm 03:24 PM
Python の iframe は、Web ページに別の Web ページまたはドキュメントを埋め込むために使用される HTML タグです。 Python では、さまざまなライブラリとフレームワークを使用して iframe を処理および操作できます。その中で最も一般的に使用されるのは BeautifulSoup ライブラリで、Web ページから iframe のコンテンツを簡(jiǎn)単に抽出して操作および処理できます。 iframe の処理方法を知ることは、Web 開(kāi)発とデータ スクレイピングの両方に非常に役立ちます。
iframe のスクロール動(dòng)作を監(jiān)視する
Feb 18, 2024 pm 08:40 PM
iframe のスクロールを監(jiān)視する方法には、特定のコード サンプルが必要です。iframe タグを使用して Web ページに他の Web ページを埋め込む場(chǎng)合、場(chǎng)合によっては、iframe 內(nèi)のコンテンツに対して特定の操作を?qū)g行する必要があります。一般的なニーズの 1 つは、スクロールが発生したときに対応するコードを?qū)g行できるように、iframe のスクロール イベントをリッスンすることです。以下では、JavaScript を使用して iframe のスクロールを監(jiān)視する方法を紹介し、參考として具體的なコード例を示します。 iframe 要素を取得する まず、必要なものがあります。
