2011年08月10日

[javascript] iframeの中から表示しているページURLを取得するこのエントリーをはてなブックマークに追加

javascriptはクロスドメインな動作ができないので、
自ドメイン以外のものへアクセス出来ない。

例えば以下へアクセスする

http://mine.com/outer.html


そのhtml中に iframeがありiframeは以下を呼び出しているとする。


http://mine.com/outer.html
iframe-> http://yours.jp/inner.html

この時、iframeから http://mine.com/outer.html (ブラウザのURLバーに表示されているURL)を取得したい。

普通であれば parent.location.href で取得できるんだけど、
どうやらaccess deniedになっちゃう様子。すげーなjavascript。厳密だな。

その現象を確認してみた。

08-05-2011[2]


一番右下に注目。
同一ドメインでは取得できている「parent.location」が、異ドメインを表示している場合は空になっちゃってます。
parentなら拾えそうなもんだけどねー。

そんなわけで、document.referrer を使うことに。
でも、これも完璧ではないらしいので、なんとも。

その先については、これから。
JavaScript/クロスドメイン制限の解除 - WebTips


■ チェックに使用したソース



※異ドメイン間でのテストなのでvhostなど設定して
mine.comとyours.jpを自分のファイルで表示できる必要があります。


◇ inner.html


<!-- Inner HTML -->
<html>
<head>
<META http-equiv=content-type content="text/html; charset=UTF-8">
<title>title</title>
<style type="text/css">
b {color:#922a09;}
</style>
</head>
<body>
<h3>INNER(IFRAME、子要素)が拾う情報↓ </h3>
<hr>
<script language="javascript">
document.write("document.location : <b>" + document.location + "</b>");
document.write("<hr>");
document.write("document.referrer : <b>" + document.referrer + "</b>");
document.write("<hr>");
document.write("parent.location.href : <b>" + parent.location.href + "</b>");
document.write("<hr>");
document.write("parent.location : <b>" + parent.location + "</b>");
document.write("<hr>");
</script>
</body>
</html>




◇ outer.html


<html>
<head>
<META http-equiv=content-type content="text/html; charset=UTF-8">
<title>title</title>
<style type="text/css">
b {color:#229a09;}
#container { width:100%;height:200; background:#eeFFee;border:solid 1px #335533;padding:10px; }
#box1 { float:left; width:auto; padding:10px; }
#box2 { float:left; width:auto; background:#eeeeff;border:solid 1px #333355;padding:15px 5px 5px 5px;}
</style>
</head>
<body>
<!-- Outer HTML -->
<h1>iframeが同一ドメイン内の場合</h1>
<div id="container">
<div id="box1">
<h3>outer(親要素)が拾う情報↓</h3>
<hr>
<script language="javascript">
document.write("document.location : <b>" + document.location + "</b>");
document.write("<hr>");
document.write("document.referrer : <b>" + document.referrer + "</b>");
document.write("<hr>");
document.write("parent.location.href : <b>" + parent.location.href + "</b>");
document.write("<hr>");
document.write("parent.location : <b>" + parent.location + "</b>");
document.write("<hr>");
</script>
</div>
<!-- Inner HTML -->
<div id="box2">
<iframe style="background-color: #faefed; border:2px solid #FFffff;"
height="170" frameborder="no" width="380" src="inner.html"></iframe>
</div>
</div>
<br style="clear:both;">
<br>
<hr>

<!-- Outer HTML -->
<h1>iframeが異なるドメインの場合</h1>
<div id="container">
<div id="box1">
<h3>outer(親要素)が拾う情報↓</h3>
<hr>
<script language="javascript">
document.write("document.location : <b>" + document.location + "</b>");
document.write("<hr>");
document.write("document.referrer : <b>" + document.referrer + "</b>");
document.write("<hr>");
document.write("parent.location.href : <b>" + parent.location.href + "</b>");
document.write("<hr>");
document.write("parent.location : <b>" + parent.location + "</b>");
document.write("<hr>");
</script>
</div>
<!-- Inner HTML -->
<div id="box2">
<iframe style="background-color: #faefed; border:2px solid #FFffff;"
height="170" frameborder="no" width="380" src="http://yours.jp/inner.html"></iframe>
</div>
</div>
</body>
</html>




これに関連した記事→│ javascript  
 

この記事へのトラックバックURL

http://trackback.blogsys.jp/livedoor/qoozy/52482471