使用 jquery 在 div 标签中动态加载 html 页面
[英]load html page in div tag using jquery dynamically
问题描述
Dynamically load the html page inside div tag using JavaScript or jQuery.
使用 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>
But it not working..但它不起作用..
6 个解决方案
解决方案1
9 2013-03-10 07:29:57
The problem you are experiencing is the fact that the javascript is treating page.html as an object, accessing the property html .您遇到的问题是 javascript 将page.html视为 object，访问属性html 。 What you need to do is quote the string, so it is treated how it was intended.. as a string:您需要做的是引用string，因此它按照预期的方式处理.. 作为 string：
$('#div_content').load('page.html');
Update 1:更新1：
First of all, what you have above is called jQuery .首先，您上面的内容称为jQuery 。 jQuery is a javascript library, which you must include in your head tag before you can use any of the jquery object's methods: jQuery 是一个 javascript 库，在使用 jquery 对象的任何方法之前，您必须将其包含在 head 标签中：
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
You must include the above line in your document head, to gain access to the methods and properties of the jQuery $ object.您必须在文档头中包含上述行，才能访问 jQuery $ object 的方法和属性。
The fact that you are not currently doing so is why your code is broken and refuses to work.您目前没有这样做的事实是您的代码被破坏并拒绝工作的原因。 Also, depending on your setup, you may wish to serve the jquery file yourself, in which case you would download it and put it somewhere on your server.此外，根据您的设置，您可能希望自己提供 jquery 文件，在这种情况下，您可以下载它并将其放在服务器上的某个位置。
Secondly, C:\ is not your web root.其次， C:\不是您的 web 根。 localhost is, so to get that bit to work you would have to use the url of 'ex1.html'. localhost是，所以要让那个位工作你必须使用'ex1.html'的url。 That's it.而已。 Since your document is already in the web root(or at least I think it is), it should have access to any adjacent files... else..由于您的文档已经在 web 根目录中（或者至少我认为是），它应该可以访问任何相邻文件......否则..
Say your index file is in htdocs.假设您的索引文件在 htdocs 中。 Your index's url would then be localhost/index.ext (with ext being whatever file extension you used).您的索引的 url 将是localhost/index.ext （其中 ext 是您使用的任何文件扩展名）。 And then ex1.html was in a different folder, say 'folder1'.然后ex1.html位于不同的文件夹中，例如“文件夹 1”。 To access it correctly in your jquery code.. folder1/ex1.html .要在您的 jquery 代码中正确访问它.. folder1/ex1.html 。
Finally, script tags go in either the head or the body.. not neither.最后，脚本标签 go 在头部或身体中.. 两者都不是。
解决方案2
2 2013-03-10 07:19:44
$(document).ready(function(){ $('#btn').click(function(){ $('#div_content').load('html.page'); }); });解决方案3
2 2013-03-10 07:20:10
$('#div_content').load("page.html");解决方案4
0 2013-03-10 07:20:16
Try this:尝试这个：
$(document).ready(function(){ $('#btn').click(function(){ $.get('page.html').success(function(data) { $('#div_content').html(data); }); }); });
Replace page.html with your page将page.html替换为您的页面
解决方案5
0 2013-03-10 07:20:28
Try this..
$(document).ready(function(){
$('#btn').click(function(){
$('#div_content').html('page.html');
});
});
解决方案6
0 2013-03-12 13:33:52
main.html 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
<html> <head></head> <body> <div id='target'> I am from test page. </div> </body> </html>
Here i wrote 2 html programs.在这里我写了 2 个 html 程序。 The problem was occurred on function only.该问题仅发生在 function 上。 i corrected that & now its working perfectly.我纠正了这一点，现在它工作得很好。 We can load txt file also: Example:我们也可以加载 txt 文件：示例：
function check(){ $('#tar').load('test.txt'); // here 'test.txt' is a text file } </script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.