今日は、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('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>ログイン後にコピー
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('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>ログイン後にコピー
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('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>ログイン後にコピー
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('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>ログイン後にコピー
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 サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
