人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

javascriptの外部スクリプトを利用してiframeを表示させたいのですがうまくいきません。

document.write("<iframe src='https:abc.html' width='800' height='800' frameborder='0' marginwidth='0' marginheight='0'></iframe>
")

これではうまく表示できないのですが何故でしょう?

●質問者: kazuhiko11
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● 井戸端さん
●50ポイント

iframeはエレメント生成からが基本よ。このあたりが参考になるかしら?
JavaScript による IFRAME の動的実装


2 ● snow0214
●50ポイント

改行の位置とかが間違っていませんか。
IE11で下のスクリプトは正常に動作します。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script type="text/javascript">
document.write("<iframe src='http://q.hatena.ne.jp/1403096283' width='800' height='800' frameborder='0' marginwidth='0' marginheight='0'></iframe>");
</script>
</body>
</html>

a-kuma3さんのコメント
多分、フレームに埋め込もうとしてる *先* の問題なのだと思います。

3 ● a-kuma3
●50ポイント

読み込もうとしている URL が https:abc.htm と、ホストが抜けているのはご愛嬌として、うまくいかないのは iframe で読み込もうとしてる先が X-Frame-Options を指定しているのだと思います。
https://developer.mozilla.org/ja/docs/HTTP/X-Frame-Options
https://www.jpcert.or.jp/tips/2010/wr103601.html

例えば、https://www.google.com/ では X-Frame-Options は、以下のように返ってきます。

X-Frame-Options: SAMEORIGIN

こう返ってくる URL では、同じサイトのページでしかフレーム内に入れることができず、

document.write("<iframe src='https://www.google.com/' width='800' height='800' frameborder='0' marginwidth='0' marginheight='0'></iframe>")

と書こうが、No.1 の回答のような DOM を使って埋め込もうが、

 var e = document.createElement("iframe");
 e.src = "https://www.google.com/";
 ...
 document.body.appendChild(e);

最近のブラウザでは、エラー扱いになります。


規制があれば、逃げ道を作ろうとするやつが出てくるのは当然の成り行きで、こんな回避の仕方があるようですが。
http://stackoverflow.com/questions/19921676/does-not-permit-cross-origin-framing-iframe

つまり、X-Frame-Options ヘッダで規制をかけないところを経由して、読みだせば良いじゃない、と。
先ほどの規制がかかっていたコードを、以下のように直せば、(無理矢理感は半端ないですが)読めなくはないです。
document.write を使う場合。

document.write("<iframe src='http://whateverorigin.org/get?url=https://www.google.com/' width='800' height='800' frameborder='0' marginwidth='0' marginheight='0'></iframe>")

DOM で iframe を使う場合。

 var e = document.createElement("iframe");
 e.src = "http://whateverorigin.org/get?url=https://www.google.com/";
 ...
 document.body.appendChild(e);

4 ● 7cc
●50ポイント

srcに指定するURLは次の2通りあります。まずはどちらかの書き方にしてください。
それで上手く行かない場合は、No.3の回答にある通りです。

相対パス httpなし

  1. <iframe src="abc.html"></iframe>
  2. <iframe src="/abc.html"></iframe>
  3. <iframe src="../abc.html"></iframe>

絶対パス http(s)あり

  1. <iframe src="http://example.com/abc.html"></iframe>

*example.comは任意のサイトに変える。


a-kuma3さんのコメント
あ、相対パスかもしれないのか。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ