ホームページ > ウェブフロントエンド > jsチュートリアル > js操作iframeは、さまざまな主流ブラウザのサンプルコードと互換性があります_javascriptスキル

js操作iframeは、さまざまな主流ブラウザのサンプルコードと互換性があります_javascriptスキル

WBOY
リリース: 2016-05-16 17:28:15
オリジナル
1246 人が閲覧しました

プロジェクトに取り組んでいるときに、iframe の操作に関連する問題が発生しました。実際、iframe 内でフォームを操作するときは、親フォームの関数が呼び出されます。そこで、テスト用に 2 つの非常に単純な HTML ページを作成しました。一般的なオンライン方法を使用すると、Google Chrome は常にエラーを報告し、失敗しました。
親ページparent.htmlのコードは次のとおりです

コードをコピーします コードは次のとおりです:


><script src="jquery -1.10.1.min.js" type="text/javascript"></script> <br><script type="text/javascript"> ParentFunction() { <br>alert ('ParentFunction') <br></script><script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <br><body><input type="button" id ="btnCancel" class="button " value="テスト" /> <br><iframe id="FRMdetail" name="FRMdetail" Frameborder="0" src='child.html' style="width: 100%;height:100%; " ></iframe> <br></body> <br></html> <br><br> <br>サブページ child.html のコードは次のとおりです以下のように<br><br><br> </div> <br>コードをコピー<br><div class="codetitle"> <span> コードは次のとおりです:<a style="CURSOR: pointer" data="83824" class="copybut" id="copybut83824" onclick="doCopy('code83824')"><u> </u><html xmlns="http ://www.w3.org/1999/xhtml"> ; </a><head><title> </span>


rrr




IE では var t=window.parent; を呼び出すことができます。 Google Chrome では、常に次のエラーが表示されます。
オリジン "null" のフレームへのアクセスをブロックしました。
をオンラインで検索しています。長い時間がかかりましたが、それらのいくつかは非常に古いバージョンであり、基本的には役に立たず、他の人が言っているだけで、基本的にテストされていません。そこで自分で調べてみたところ、実はGoogle Chrome上での方法も可能であることが分かりましたが、ファイルシステム内で呼び出すと使用前に解放しなければならないのが不思議です。
実際には、別の HTML5 メソッド postMessage があるので、それに合わせて書き直しました。
親ページparent.html のコードは次のとおりです。




コードをコピーします

コードは次のとおりです: </a>