別ドメインのhtmlを読み込む方法

見本
見本を参考にトライしてみましたが、何も表示されません。
どこが間違っているのでしょうか？

OS⇒windows 10 64bit ブラウザ⇒firefox 51.0.1

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>test</title>
  <!--  jQuery 読み込む -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <!-- jquery.xdomainajax.js を読み込む  -->
  <script src="jquery.xdomainajax.js"> </script>
  <script type="text/javascript">

  url = 'http://www.yahoo.co.jp/';
function readHtml(url) {
  $.ajax({
    type: 'GET',
    url: url,
    success: function(data) {
      $('#content').append(data.responseText);
    },
    error: function(xhr, status, err) {
      alert('html_read_error' + url);
    }
  });
}
  </script>
</head>
<body>
 
</body>
</html>

CHERRY

2017/03/12 07:43

お使いの OS やWebブラウザは何でしょうか？また、バージョンは、いくつでしょうか？

deep

2017/03/12 08:02

情報修正いたしました。ご指摘ありがとうございます。

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

回答4件

直接の回答ではありませんが・・・

jQuery.ajax を使うのは目的ではなくて、「別ドメインのhtmlを読み込む方法」という単なる手段であり、取得したコンテンツをページの中に表示できれば目的が果たせるなら、jQuery.ajax を使うのはやめて iframe を使うとか frameset/frame を使ってはいかがですか？

投稿2017/03/12 04:26

退会済みユーザー

総合スコア0

deep

2017/03/12 07:07

ご回答ありがとうございます。 <html> <head> <title>test</title> </head> <body> <iframe src="http://www.yahoo.co.jp/"></iframe> </body> </html> 何も表示されないのですが、どこかが間違っているのでしょうか？

退会済みユーザー

2017/03/12 07:38 編集

http://www.yahoo.co.jp/ の応答ヘッダを見てみましたが、X-Frame-Options: SAMEORIGIN が含まれていました。それがあると、クロスドメイン要求では iframe 内には表示できないです。フレーム内のコンテンツを非表示に制御する仕組みは RFC 7034 において規定され、クリックジャッキングと呼ばれる攻撃に対処するために導入されたものだそうです。

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

function readHtml(url)はなにをトリガーに動くの？

投稿2017/03/11 23:52

toutou

総合スコア2050

id="content" はありますか？

投稿2017/03/11 22:27

Zuishin

総合スコア28660

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <title>test</title>
6  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
7  <script src="https://raw.githubusercontent.com/padolsey-archive/jquery.fn/master/cross-domain-ajax/jquery.xdomainajax.js"></script>
8  <script type="text/javascript">
9function readHtml(url) {
10  $.ajax({
11    type: 'GET',
12    url: url,
13    success: function(data) { 
14      $('#content').append(data.responseText);
15    },
16    error: function(xhr, status, err) {
17      alert('html_read_error' + url);
18    }
19  });
20}
21  </script>
22</head>
23<body>
24  <script type="text/javascript">
25    url = 'http://www.yahoo.co.jp/';
26    readHtml(url);
27  </script>
28  <div id="content">
29  </div>
30</body>
31</html>