Heim > Artikel > Web-Frontend > Einführung in domänenübergreifende gegenseitige Zugriffsmethoden zwischen Iframe und Mainframe
Einführung in domänenübergreifende gegenseitige Zugriffsmethoden zwischen Iframe und Mainframe
- 巴扎黑Original
- 2017-09-16 09:33:141955Durchsuche
Heute muss ich nur die Implementierungsmethode des gegenseitigen Zugriffs zwischen Iframe und Hauptrahmen verwenden. Es ist wirklich gut, es zu teilen >
1. Gleicher gegenseitiger Zugriff zwischen Domänen
Angenommen, dass die Domänen A.html und b.html beide localhost (gleiche Domäne) sind.Der Iframe in A.html ist eingebettet in B.html, name=myframe
A.html Es gibt eine js-Funktion fMain()
B.html hat eine js-Funktion fIframe()
, die implementiert werden muss. A.html ruft fIframe() auf. von B.html und B.html ruft fMain()
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('main function execute success');
}
// 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>
Klicken Sie auf
<!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('iframe function execute success');
}
// 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> wird erfolgreich ausgeführt und Iframe-Funktion erfolgreich ausgeführt wird angezeigt. Wie unten gezeigt
klicken Sie auf die Exec-Hauptfunktionsschaltfläche von 
B.html
Hauptfunktion wird erfolgreich ausgeführt erscheint. Wie unten gezeigt
2. Domänenübergreifender gegenseitiger Zugriff
Angenommen, die A.html-Domäne ist localhost und die B.html-Domäne ist 127.0.0.1 (domänenübergreifend) Localhost und 127.0.0.1 werden hier nur verwendet, um das Testen zu erleichtern. Localhost und 127.0.0.1 befinden sich bereits in unterschiedlichen Domänen, sodass der Ausführungseffekt derselbe ist.
Im tatsächlichen Gebrauch wechseln Sie einfach zu www.domaina.com und www.domainb.com.Der iframe in A.html ist in B.html eingebettet, name=myframe
A.html hat die js-Funktion fMain()
B.html hat die js-Funktion fIframe()
muss A implementieren .html, um fIframe() von B .html aufzurufen, B.html ruft fMain() von A.html auf (domänenübergreifender Aufruf)
Wenn Sie die obige Methode für dieselbe Domäne verwenden, bestimmt der Browser, dass A.html und B.html befinden sich in unterschiedlichen Domänen. Es wird eine Fehlermeldung angezeigt.
Nicht erfasster Sicherheitsfehler: Der Zugriff eines Frames mit dem Ursprung „http://localhost“ auf einen Frame mit dem Ursprung „http://127.0.0.1“ wurde blockiert. Protokolle, Domänen und Ports müssen übereinstimmen.
Umsetzungsprinzip:
Da der Browser aus Sicherheitsgründen den Zugriff von verschiedenen Domänen aus verbietet. Daher können die anrufenden und ausführenden Parteien aufeinander zugreifen, solange sie sich in derselben Domäne befinden.
Wie ruft A.html zunächst die fIframe-Methode von B.html auf?1. Erstellen Sie einen Iframe in A.html.
2. Platzieren Sie die Iframe-Seite unter derselben Domäne wie B. html und nennen Sie es execB.html3.execB.html enthält den js-Aufruf, der die fIframe-Methode von B.html aufruft
Auf diese Weise A.html kann execB.html übergeben. Die fIframe-Methode von B.html wird aufgerufen.
<script type="text/javascript"> parent.window.myframe.fIframe(); // execute parent myframe fIframe function </script>In ähnlicher Weise muss B.html die fMain-Methode von A.html aufrufen. Es muss die execA.html in dieselbe Domäne wie A.html in B.html einbetten.
execA.html, um die aufzurufen A.html fMain-Methode. Die js ruft
auf, sodass A.html und B.html sich gegenseitig domänenübergreifend aufrufen können.
<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('main function execute success');
}
// exec iframe function
function exec_iframe(){
if(typeof(exec_obj)=='undefined'){
exec_obj = document.createElement('iframe');
exec_obj.name = 'tmp_frame';
exec_obj.src = 'http://127.0.0.1/execB.html';
exec_obj.style.display = 'none';
document.body.appendChild(exec_obj);
}else{
exec_obj.src = 'http://127.0.0.1/execB.html?' + 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('iframe function execute success');
}
// exec main function
function exec_main(){
if(typeof(exec_obj)=='undefined'){
exec_obj = document.createElement('iframe');
exec_obj.name = 'tmp_frame';
exec_obj.src = 'http://localhost/execA.html';
exec_obj.style.display = 'none';
document.body.appendChild(exec_obj);
}else{
exec_obj.src = 'http://localhost/execA.html?' + 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>
wird wie unten gezeigt ausgeführt:
<!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>
Das obige ist der detaillierte Inhalt vonEinführung in domänenübergreifende gegenseitige Zugriffsmethoden zwischen Iframe und Mainframe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!