別ドメインのiframeの親のURLを取得する方法

概要

ことなるドメインのiframeを使用した時に、子供のiframeから親のurlを取得する方法です。

そもそも、こんな事をしないといけない時点で、設計ミスなような気がしますが、

今回のケースでは、

iframeでフォームを用意して、親がそれを読み込んでいます。
親は複数ページで同じiframeのフォームを読み込んでいるので、どのページのフォームかを識別する為に、
親のURLを取得したくなってしまったので、その時のメモになります。

結論

結論からすると

document.referrer

を使用するです。

サンプルコード

参考までに、iframe側のフォームのコードになります。

<form id="xxx-form">
    <input id="page_url" name="page_url" type="hidden" value="">
    <div class="form-group">
      <label class="control-label" for="name">name</label>
      <div class="">
        <input class="form-control" id="name" name="name" type="text" value="">
      </div>
    </div>
    <div class="form-group">
      <div class="">
        <input class="form-control btn btn-default" id="submitBtn" name="commit" type="submit" value="送信">
      </div>
    </div>
  </form>


<script>
 $(document).ready(function(){
        $('input#page_url').val(document.referrer);
    });
</script>

ページ読みこみ時に、page_urlのhiddenフィールドに親のurlを設定しています。

まとめ

そもそも、こんなことをしないですむように設計しましよう。