-1

JavaScript または jQuery を使用して、div タグ内の html ページを動的に読み込みます。

<html>
<head>
<title>Untitled Document</title>
</head>
<script type="text/javascript">
$(document).ready(function(){
    $('#btn').click(function(){   
       $('#div_content').html('C:/xampp/htdocs/ex1.html');
    });
});
</script>
<body>
<input type="button" id="btn" value="Load" />
<div id="d_content">
</div>
</body>
</html>

しかし、それは動作しません..

4

6 に答える 6

9

あなたが経験している問題は、javascriptがpage.htmlオブジェクトとして扱われ、プロパティにアクセスしているという事実ですhtml。あなたがする必要があるのは文字列を引用することです、それでそれはそれが意図されたように扱われます..文字列として：

$('#div_content').load('page.html');

アップデート1：

まず第一に、あなたが上に持っているものはjQueryと呼ばれています。jQueryはjavascriptライブラリであり、jqueryオブジェクトのメソッドを使用する前にheadタグに含める必要があります。

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>

$jQueryオブジェクトのメソッドとプロパティにアクセスするには、上記の行をドキュメントヘッドに含める必要があります。

あなたが現在そうしていないという事実はあなたのコードが壊れていて動作することを拒否する理由です。また、設定によっては、jqueryファイルを自分で提供することもできます。その場合は、ファイルをダウンロードしてサーバーのどこかに配置します。

第二に、C:\あなたのウェブルートではありません。 localhostつまり、そのビットを機能させるには、「ex1.html」のURLを使用する必要があります。それでおしまい。ドキュメントはすでにWebルートにあるので（または少なくともそうだと思います）、隣接するファイルにアクセスできるはずです...それ以外の場合。

インデックスファイルがhtdocsにあるとします。その場合、インデックスのURLは次のようになりますlocalhost/index.ext（extは使用したファイル拡張子です）。そしてex1.html、別のフォルダ、たとえば「folder1」にありました。jqueryコードで正しくアクセスするにはfolder1/ex1.html...

最後に、スクリプトタグは頭または体のどちらかに挿入されます。どちらにも挿入されません。

于 2013-03-10T07:29:57.500 に答える
2 
$(document).ready(function(){
    $('#btn').click(function(){   
        $('#div_content').load('html.page');
     });
});
于 2013-03-10T07:19:44.030 に答える
2 
$('#div_content').load("page.html");
于 2013-03-10T07:20:10.437 に答える
0

これを試して：

$(document).ready(function(){
$('#btn').click(function(){
$.get('page.html').success(function(data)
 {
     $('#div_content').html(data);
 });
 });
 });

page.htmlあなたのページに置き換えます

于 2013-03-10T07:20:16.737 に答える
0

これを試して..

$(document).ready(function(){
    $('#btn').click(function(){   
       $('#div_content').html('page.html');
    });
});
于 2013-03-10T07:20:28.357 に答える
0

main.html

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
<title>Untitled Document</title>
</head>
<script>

function check(){
$('#tar').load('test.html #target');  // here 'test.html' is a page and 'target' id a id of 'test.html'
}
  </script>

<body>
<input type="button" id="btn" value="Go"  onclick="check();"/>
<div id="tar">
</div>
</body>
</html>

test.html

<html>
<head></head>
<body>
<div id='target'>
 I am from test page.
</div>
</body>
</html>

ここで私は2つのhtmlプログラムを書きました。問題は関数でのみ発生しました。私はそれを修正し、今では完全に機能しています。txt ファイルもロードできます。例:

function check(){
    $('#tar').load('test.txt');  // here 'test.txt' is a text file
    }
      </script>
于 2013-03-12T13:33:52.973 に答える