iframeとメインフレーム間のクロスドメイン相互アクセス方法の紹介-jsチュートリアル-php.cn

iframeとメインフレーム間のクロスドメイン相互アクセス方法の紹介

巴扎黑

リリース： 2017-09-16 09:33:14

オリジナル

2084 人が閲覧しました

今日は、iframeとメインフレーム間の相互アクセスの実装方法を使用するだけです。とても良い記事です。必要な方は参考にしてください。 . 同じドメイン内での相互アクセス

前提 A.html と b.html ドメインは両方とも localhost (同じドメイン) A.html の iframe は B.html に埋め込まれており、name=myframe

A.html には js 関数がありますfMain()

B.htmlにはjs関数fIframe()があります
必須 B.htmlのfIframe()を呼び出すためにA.htmlを実装し、A.htmlのfMain()を呼び出すためにB.htmlを実装します

A.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <title> main window </title>

 <script type="text/javascript">
 // main js function
 function fMain(){
	alert(&#39;main function execute success&#39;);
 }

 // exec iframe function
 function exec_iframe(){
	window.myframe.fIframe();
 }
 </script>

 </head>

 <body>
 <p>A.html main</p>
 <p><input type="button" value="exec iframe function" onclick="exec_iframe()"></p>
 <iframe src="B.html" name="myframe" width="500" height="100"></iframe>
 </body>
</html>

ログイン後にコピー

B.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <title> iframe window </title>

 <script type="text/javascript">
 // iframe js function 
 function fIframe(){
	alert(&#39;iframe function execute success&#39;);
 }

 // exec main function
 function exec_main(){
	parent.fMain();
 }
 </script>

 </head>

 <body>
 <p>B.html iframe</p>
 <p><input type="button" value="exec main function" onclick="exec_main()"></p>
 </body>
</html>

ログイン後にコピー

A.html

iframe関数実行ボタンをクリックすると、実行が成功し、

iframe関数実行成功がポップアップ表示されます。以下のように

B.html

の exec main function ボタンをクリックすると、実行が成功し、

main functionexecute success がポップアップ表示されます。以下に示すように

2. クロスドメイン相互アクセス

A.htmlドメインがlocalhost、B.htmlドメインが127.0.0.1(クロスドメイン)であると仮定しますここではlocalhostと127.0.0.1を使用します。テストを容易にするため、localhost はすでに 127.0.0.1 とは異なるドメインであるため、実行効果は同じです。 実際の使用では、www.domaina.com と www.domainb.com に変更するだけです。

A.htmlのiframeはB.htmlに埋め込まれており、name=myframe

A.htmlにはjs関数fMain()があります
B.htmlにはjs関数fIframe()があります
fIframe()を呼び出すにはA.htmlを実装する必要がありますB.html の、B .html は A.html の fMain() を呼び出します (クロスドメイン呼び出し)

上記の同じドメインメソッドを使用すると、ブラウザは A.html と B.html が異なるドメインにあると判断します。とエラーメッセージが表示されます。
Uncaught SecurityError: オリジン「http://localhost」のフレームがオリジン「http://127.0.0.1」のフレームにアクセスすることをブロックしました。プロトコル、ドメイン、およびポートが一致する必要があります。

実装原則:

。ブラウザはセキュリティ上の理由から、異なるドメインからのアクセスを禁止しているためです。したがって、呼び出し側と実行側が同じドメイン内にある限り、相互にアクセスできます。まず、A.html は B.html の fIframe メソッドをどのように呼び出しますか? 1. A.html に iframe を作成します

2. iframe ページを B.html と同じドメインに配置し、execB.html という名前を付けます

3 .execB. B.html の fIframe メソッドを呼び出す js 呼び出しがあります

<script type="text/javascript"> 
parent.window.myframe.fIframe(); // execute parent myframe fIframe function 
</script>

ログイン後にコピー

このように、A.html は execB.html を通じて B.html の fIframe メソッドを呼び出すことができます。

同様に、B.html は A.html の fMain メソッドを呼び出す必要があります。B.html の A.html と同じドメインに execA.html を埋め込む必要があります。
execA.html には fMain を呼び出す js 呼び出しがあります。 A.htmlのメソッド

<script type="text/javascript"> 
parent.parent.fMain(); // execute main function 
</script>

ログイン後にコピー

このようにして、A.htmlとB.htmlはドメインを越えて相互に呼び出すことができます。

A.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <title> main window </title>

 <script type="text/javascript">

 // main js function
 function fMain(){
	alert(&#39;main function execute success&#39;);
 }

 // exec iframe function
 function exec_iframe(){
	if(typeof(exec_obj)==&#39;undefined&#39;){
		exec_obj = document.createElement(&#39;iframe&#39;);
		exec_obj.name = &#39;tmp_frame&#39;;
		exec_obj.src = &#39;http://127.0.0.1/execB.html&#39;;
		exec_obj.style.display = &#39;none&#39;;
		document.body.appendChild(exec_obj);
	}else{
		exec_obj.src = &#39;http://127.0.0.1/execB.html?&#39; + Math.random();
	}
 }
 </script>

 </head>

 <body>
 <p>A.html main</p>
 <p><input type="button" value="exec iframe function" onclick="exec_iframe()"></p>
 <iframe src="http://127.0.0.1/B.html" name="myframe" width="500" height="100"></iframe>
 </body>
</html>

ログイン後にコピー

B.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <title> iframe window </title>

 <script type="text/javascript">
 // iframe js function 
 function fIframe(){
	alert(&#39;iframe function execute success&#39;);
 }

 // exec main function
 function exec_main(){
	if(typeof(exec_obj)==&#39;undefined&#39;){
		exec_obj = document.createElement(&#39;iframe&#39;);
		exec_obj.name = &#39;tmp_frame&#39;;
		exec_obj.src = &#39;http://localhost/execA.html&#39;;
		exec_obj.style.display = &#39;none&#39;;
		document.body.appendChild(exec_obj);
	}else{
		exec_obj.src = &#39;http://localhost/execA.html?&#39; + Math.random();
	}
 }
 </script>

 </head>

 <body>
 <p>B.html iframe</p>
 <p><input type="button" value="exec main function" onclick="exec_main()"></p>
 </body>
</html>

ログイン後にコピー

execA.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <title> exec main function </title>
 </head>

 <body>
 	<script type="text/javascript">
		parent.parent.fMain(); // execute main function
	</script>
 </body>
</html>

ログイン後にコピー

execB.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <title> exec iframe function </title>
 </head>

 <body>
	<script type="text/javascript">
		parent.window.myframe.fIframe(); // execute parent myframe fIframe function
	</script>
 </body>
</html>

ログイン後にコピー

実行は以下の通り:

以上がiframeとメインフレーム間のクロスドメイン相互アクセス方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。