Maison > Article > interface Web > Introduction aux méthodes d'accès mutuel inter-domaines entre iframe et main frame

Introduction aux méthodes d'accès mutuel inter-domaines entre iframe et main frame

巴扎黑original: 2017-09-16 09:33:141955parcourir

Aujourd'hui, j'ai juste besoin d'utiliser la méthode d'implémentation de l'accès mutuel entre iframe et main frame. Il m'est arrivé de voir cet article. Il est vraiment bien. J'aimerais le partager. Les amis qui en ont besoin peuvent s'y référer. >

1. Même accès mutuel entre les domaines

Supposons que les domaines A.html et b.html sont tous deux locauxhost (même domaine)

L'iframe dans A.html est intégré dans B.html, name=myframe
A.html Il existe une fonction js fMain()
B.html a la fonction js fIframe()
qui doit être implémentée par A.html appelle fIframe(). de B.html, et B.html appelle fMain()
A.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> 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>

Cliquez sur

A. Le bouton de la fonction exec iframe de 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>

est exécuté avec succès et

la fonction iframe exécute avec succès apparaît. Comme indiqué ci-dessous

cliquez sur le bouton de fonction principale d'exécution de B.html

, l'exécution est réussie et

la fonction principale exécute avec succès apparaît. Comme indiqué ci-dessous

2. Accès mutuel inter-domaines

Supposons que le domaine A.html soit localhost et le domaine B.html. est 127.0.0.1 (Cross-domain) Localhost et 127.0.0.1 sont utilisés ici uniquement pour faciliter les tests. Localhost et 127.0.0.1 sont déjà dans des domaines différents, donc l'effet d'exécution est le même.

En utilisation réelle, passez simplement à www.domaina.com et www.domainb.com.

L'iframe dans A.html est intégré dans B.html, name=myframe
A.html a la fonction js fMain()
B.html a la fonction js fIframe()
doit implémenter A .html pour appeler fIframe() de B .html, B.html appelle fMain() de A.html (appel inter-domaines)

Si vous utilisez la méthode de même domaine ci-dessus, le navigateur détermine que A.html et B.html sont dans des domaines différents. Il y aura un message d'erreur.
Erreur de sécurité non détectée : l'accès d'une trame d'origine "http://localhost" à une trame d'origine "http://127.0.0.1" doit correspondre.

Principe de mise en œuvre :

Car le navigateur interdit l'accès depuis différents domaines pour des raisons de sécurité. Par conséquent, tant que les parties appelantes et exécutantes se trouvent dans le même domaine, elles peuvent accéder les unes aux autres.

Tout d'abord, comment A.html appelle-t-il la méthode fIframe de B.html

1 Créez un iframe dans A.html

2. Placez la page iframe sous le même domaine que B. html et nommez-le execB.html

3.execB.html contient l'appel js qui appelle la méthode fIframe de B.html

De cette façon, A.html peut passer execB.html La méthode fIframe de B.html est appelée.

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

De même, B.html doit appeler la méthode fMain de A.html. Il doit intégrer le execA.html dans le même domaine que A.html dans B.html

execA.html pour appeler le. Méthode A.html fMain. Le js appelle

afin que A.html et B.html puissent s'appeler entre domaines.

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

A.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> 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>

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> 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>

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 main function </title>
 </head>

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

s'exécute comme indiqué ci-dessous :

<!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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment déterminer le type de valeur en JavaScriptArticle suivant：Comment déterminer le type de valeur en JavaScript

Articles Liés

Voir plus