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

Question

因此，我在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");
    });
}

Answer 1

用这个

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

Answer 2

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

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

Answer 3

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

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

最后，您缺少jQuery ready函数的最后一个括弧。

Answer 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>

谢谢大家的帮助！

Answer 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