使用 html 或 jquery 将外部页面加载到 div 中答案

【问题标题】：load external page into a div with html or jquery使用 html 或 jquery 将外部页面加载到 div 中
【发布时间】：2016-05-10 06:35:26
【问题描述】：

所以，我在 index.html 中有这段代码：

<td><a id="link" href="">Vídeos</a></td>

然后

<div name="content" id="content"></div>

我想加载一个名为 vid_content.html 的页面

我尝试了很多我在各处找到的代码，但都没有成功..

PS：所有页面都在同一个文件夹中！

我尝试的最后一件事是：

$(document).ready(function(){ 
    $("#link").click(function(){ 
        $("#content").load("vid_content.html");
    });
}

【问题讨论】：

看：stackoverflow.com/questions/10642289/…
这应该是基本的 ajax.. 你尝试了什么？
取决于你想要做什么，也许一个 iframe 就足够了：<iframe src="other_page.html"></iframe>
@Jason P - 我尝试的最后一个想法是： $(document).ready(function(){ $("#link").click(function(){ $("#content" ).load("vid_content.html"); }); } 这看起来很基本，但它不起作用。
@Avitus，这对我不起作用，因为我不想得到一个 url，而是一个 html 文件

标签： javascript jquery html load

【解决方案1】：

使用这个

 $('#content').load('/path/to/vid_content.html');

【讨论】：

别忘了提到您至少需要在本地服务器上（使用 mamp 或 xamp 的应用程序）。否则，您将遇到错误。
该任务不需要@Seb 服务器
@Rohit Agrawal，Chrome 浏览器对 ajax .load() 有限制。 Firefox 似乎可以工作。
只是为了好玩，在 Firefox 中尝试一下。只是为了刺激。

【解决方案2】：

您应该能够在 jQuery 中使用 .html() 来定义 div 中包含的 html 是什么。

    $(document).ready(function(){ 
      $("#link").click(function(){ 
        $("#content").html("vid_content.html");
      });
    }

【讨论】：

我应该在 href="" 中放什么？
你不应该在那里需要任何东西，因为你没有引用另一个页面。您正在加载到当前所在的页面。

【解决方案3】：

代码存在一些问题。首先，除非您在本地服务器上运行，否则 Ajax 请求将不起作用。简单地在 Chrome 中打开 HTML 文件是行不通的。其次，您需要将事件对象传递给单击处理程序，以便您可以在单击链接时停止页面重新加载，如下所示：

$(document).ready(function(){ 
    $("#link").click(function(e){ 
        $("#content").load("vid_content.html");
        e.preventDefault();
    });
});

最后，您缺少 jQuery 就绪函数的最后一个右括号。

【讨论】：

我应该在 #link 的 href 中添加什么？我会把它放到一个免费域上进行测试。
只需为 href 加一个#。它没有被使用，因为 javascript 正在工作。或者，您可以将 href 指向 vid_content.html 文件，然后 javascript 可以将 href 用于 Ajax 请求。

【解决方案4】：

已经有了解决办法！

这样做：

function load_vids(){ document.getElementById("content").innerHTML='<object type="text/html" data="vid_content.html #content" style="width:811px; height:570px"></object>'; }

还有这个：

<td><a id="link" href="#" onclick="load_vids()">Videos</a></td>

谢谢大家的帮助！

【讨论】：

【解决方案5】：

将其保存到“firstpage.php”中。与 -> jQuery v2.2.3

$(document).ready(function() {

    $('#content').load("secondPage.php", function() {
        //do something
    });

    $(document).on('click','#third',function(){
        $('#content').load("thirdPage.php", function() {
            //do something
        });
    });

});

进入secondPage.php

page 2<br>
----------------------<br>
<a href="#" id="third">load third</a>

进入thirdPage.php

hello world

【讨论】：