Iframe上にある入力の値を取得したいと思います。mainPageにあるボタンをクリックしたときにこの値を取得したいと思います。
さて、私はこのコードを持っています
MainPageのJavascript：
var targetDiv = document.getElementById('CP_dem');
MainPageのHTML：クリックするとIframeが読み込まれるタブと、javascript関数を呼び出すボタン
Iframe上のHTML：
Zip Code : <input class="textForm" id="CP_dem" type="text" name="CP_dem" maxlength="5" size="5" value="42101">
MainPageButtonをクリックしたときに入力値を取得したいのですが。
javascriptコードは、「targetDiv」がnullであることを示しています。
手伝ってくれませんか。どうも
最初に伝えなければならないことは次のとおりです。
iframe は親 Web サイトと同じ http ホストでホストされていますか? そうでない場合は、JavaScript の同一オリジン保護に遭遇します。それについては、http: //en.wikipedia.org/wiki/Same_origin_policyを参照してください。
つまり、コンテンツにアクセスできなくなります。ちょっと待って！httpホストが同じである2番目のケースを扱った後に説明する回避策があります!
では、その 2 番目のケースについて話しましょう。じゃあ仕事は楽だな…
iframe にアクセスするだけです (おそらく iframe タグに id "example" を指定します)。次に、example.contentWindow.document または example.contentDocument を使用してウィンドウにアクセスできます。
どちらを設定するかは、ブラウザによって異なります。js でいくつかのチェックを行う必要があります。何かのようなもの
if(document.getElementById('contentWindow.document').contentWindow) {
ifdoc = document.getElementById('contentWindow.document').contentWindow.document
} else {
ifdoc = document.getElementById('contentWindow.document').contentDocument
}
次に、JavaScript で行うのと同じように、フォームと要素にアクセスできます。ここでは説明しません...
それでは、この回答の興味深い部分にジャンプしましょう! 同じオリジン ポリシーを回避しましょう。これは「クロス サイト スクリプティング」とも呼ばれます (Google で検索してみてください...)
したがって、基本的には次の 1 つに帰着します。
親ドキュメントだけでなく、子ドキュメントからもアクセスできるプロパティが 1 つあります。
これは document.location プロパティです!
それで、あなたは何ができますか？
子サイトはそれを変更でき、親サイトはそれを監視して変更に対応できます。
もう 1 つの優れた機能は、URL フラグメント (# の後の部分) です。この部分はウェブサイトをリロードしないので、javascript は喜んでそれを変更でき、親サイトは定期的にそれをポーリングしてそれに反応することができます...
基本的に、これは作業可能な親ドキュメントと子ドキュメントのコミュニケーションの基盤を提供します。そのために美しく設計されたライブラリがあります！「facebook でログイン」の JavaScript バージョンも同じ原則に基づいていました。
これが意味することは、子文書は親文書と協力しなければならないということです。したがって、これは意図的なものであり、基本的に両方の当事者が協力して仕事を進めます。
したがって、これは問題ありません。同じオリジン ポリシーを回避しても問題ありません。
これがあなたの質問を理論的にカバーし、実際に作業するための何かを提供してくれることを願っています!
SOで良い一日をお過ごしください:)