iframeのURLを親ウィンドウのフォームから変更するJavascript

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版”]