Monacaでiframeで指定したページが表示されない

monacaでiframeを使って指定のページを表示させようとしていますが、枠が表示されるだけで、コンテンツが表示されません。
どのサイトを指定しても同じ状況で、例えば以下のサイトのようにlivedoorのサイトを指定しても表示されないのですが、通常はプレビューに表示されるのでしょうか。

http://mementoo.info/archives/2045
※iframeを用いる方法

初歩的な質問かもしれませんが、調べても解決策が見つからない状況で困っておりますので何かご存知の方はご回答いただけると助かります。

よろしくお願いいたします。

※追記
実際のソースコードは以下です。
テンプレートを選択後にiframeの記述を追加しただけのものですが、記載しておきます。

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
  <script src="components/loader.js"></script>
  <script src="lib/onsenui/js/onsenui.min.js"></script>

  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
  <link rel="stylesheet" href="css/style.css">

  <script>
    ons.ready(function() {
      console.log("Onsen UI is ready!");
    });
  </script>
</head>
<body>
<iframe src="http://www.livedoor.com/" width="300px" height="300px"></iframe>
</body>
</html>


```

退会済みユーザー

2017/03/30 00:03

「以下のサイト」とは何ですか？ URL を書けませんか？

Anon_

2017/03/30 00:47

失礼しました。修正しました。

行動規範の内容に同意します

回答2件

参考にされている記事にも書いてありますが。iframe で表示できないページがあります。具体的には応答ヘッダに X-Frame-Options が含まれる場合です。

X-Frame-Options レスポンスヘッダ
https://developer.mozilla.org/ja/docs/Web/HTTP/X-Frame-Options

質問者さんが iframe に表示しようとしているページがそうなのかは分かりませんが。

Fiddler や IE の開発者ツールで調べてみてはいかがでしょう。

投稿2017/03/30 01:36

退会済みユーザー

総合スコア0

Anon_

2017/03/30 03:26

そちらの記述には目を通しており確認しておりますが、自サイトだけでは何か設定ミスがあるかもと思い参考サイトのlivedoorのHPを指定する記述でも同様の現象になると記載させていただきました。よろしくお願いします。

行動規範の内容に同意します

私自身Cordovaでiframeを使おうとしたことが無いので詳細は分からないのですが、下記情報によるとCordovaでのiframeはあまり推奨されていないようですね。

参考リンク

悪意のある広告情報関連がiframeを通じて表示されてしまうため・・・というようなことが書いてあるような気がします。また、iOSでは全てが遮断されてしまうとも書いてあるように思います。

Note that this statement is not true for iOS, which intercepts everything including iframe connections.

「それでも使いたい」という場合にどうすべきか、私では分かりかねます。他の方の回答を待ってみてください。

なお差し出がましいようですが、Cordova開発はWeb開発とは異なります。どういう経緯でiframeの利用を検討されているのかは把握しかねますが、通常、Cordova開発ではあまりiframeの利用は想定されないかと思います。
必要であれば別のブラウザアプリで必要なURLにアクセスするようにするのが良いかと思います。

投稿2017/03/30 00:19

akabee

総合スコア1947

Anon_

2017/03/30 01:07

ご回答ありがとうございます。 https://goo.gl/ef1KJO こちらの著書にもiframeを用いて外部のURLページを読み込むことができると書かれています。 monaca公式ガイドブックと書かれているので、信憑性は高いと思われますが出版時は2015年なので今ではできなくなったのでしょうか。。

akabee

2017/03/30 01:39 編集

なるほど、書籍にそのような記載がありますか・・、想定されないかと思う等と記載し申し訳ございません。事象として、「iframeには問題がないがiframe以外の箇所のエラーによりiframeが動作していない」「iframeがmonacaで動作していない」「iframeが表示できないURLである」などの種類が考えられます。この切り分けは実施済みですか。切り分けが十分でない状況であれば、現状回答者からはコードが確認できず切り分けができませんので、iframe以外のコーディングに自信がないのであればコード全体を開示してみてはどうかと思います。なお表示できないのはAndroidですか？iOSですか？iOSであれば、同様にiframeが表示できないという質問をteratailでも見かけました。

Anon_

2017/03/30 03:31

通常のWebサイトから読み込みたいサイトをiframeで指定した場合は表示されますので、iframeが表示されないサイトではないです。 monacaのクラウドIDEでコードを書いていますが、iframe使用時にプレビュー画面に指定サイトが表示されない状況です。よろしくお願いします。

akabee

2017/03/30 03:55

Webサイトで動作させた場合に問題なくiframeが表示できるのであれば、「iframeが表示できないURLである」の可能性は消えましたね。次に「iframeには問題がないがiframe以外の箇所のエラーによりiframeが動作していない」「iframeがmonacaで動作していない」の切り分けはいかがですか。要するにiframe以外の場所でエラーになっていないかどうかです。（私からはその切り分けの有無が不明です）もし上記切り分けも済んでいて、「iframeがmonacaで動作しない」ということが確定しているのでしたら、私ではこれ以上お力にはなれません。その場合かなり根の深い問題だと思われます。monacaのサポートに問い合わせることを検討してはいかがでしょう。

Anon_

2017/03/30 08:57

実際のコードを追記いたしました。テンプレートを選択し、iframeの記述のみを追加したものですので他の箇所のエラーが原因ということはないかと思われます。 monacaのサポートに連絡してみたいと思います。ご回答ありがとうございました。

行動規範の内容に同意します

あなたの回答