iframeのURLを親ウィンドウのフォームから変更するJavascript
jQueryなしのプレーンなJavascriptを使って、iframeのURLを変更するTips。
<form name="targetForm">
<input type="text" name="query" />
<input type="button" value="送信" onclick="SendSubmit()"/>
</form>
<iframe name="searchFrame" style="width:100%;height:650px" sandbox="allow-forms"></iframe>
<script type="text/javascript">
function SendSubmit(){
var query = document.targetForm.elements['query'];
var targetURL = "http://example.com/?s=";
document.searchFrame.location.href = targetURL + query.value;
}
</script>
ちなみにGoogleやFlickrなどはクリックジャッキング対策のためiframe内からの呼び出しを禁止しているそうです。
このクリックジャッキングとは、簡単に言うとiframe内に表示されたサイトにJSやCSSを使った悪意のある「なりすましボタン」を設置することを指すそうで、HTTPレスポンスヘッダにX-Frame-Optionsを追加することで対策することができます。 ▼参考 クリックジャッキングって?
[amazonjs asin=“4873115736” locale=“JP” title=“JavaScript 第6版”]