小开

可以使用 jQuery load 函数:

<div id="topBar">
<a href ="#" id="load_home"> HOME </a>
</div>
<div id ="content">
</div>


<script>
$(document).ready( function() {
$("#load_home").on("click", function() {
$("#content").load("content.html");
});
});
</script>

对不起。编辑的点击，而不是在加载。

小开

获取 API

function load_home (e) {
(e || window.event).preventDefault();


fetch("http://www.yoursite.com/home.html" /*, options */)
.then((response) => response.text())
.then((html) => {
document.getElementById("content").innerHTML = html;
})
.catch((error) => {
console.warn(error);
});
}

XHR API

function load_home (e) {
(e || window.event).preventDefault();
var con = document.getElementById('content')
,   xhr = new XMLHttpRequest();


xhr.onreadystatechange = function (e) {
if (xhr.readyState == 4 && xhr.status == 200) {
con.innerHTML = xhr.responseText;
}
}


xhr.open("GET", "http://www.yoursite.com/home.html", true);
xhr.setRequestHeader('Content-type', 'text/html');
xhr.send();
}

基于您的约束，您应该使用 ajax，并确保在调用 load_home()函数的标记之前加载 javascript

参考文献-davidwalsh

MDN-使用获取

JSFIDDLE 演示

小开

最佳答案

我终于找到了解决问题的办法

function load_home() {
document.getElementById("content").innerHTML='<object type="text/html" data="home.html" ></object>';
}

小开

使用时

$("#content").load("content.html");

然后记住，你不能在 chrome 本地“调试”，因为 XMLHttpRequest 不能加载——这并不意味着它不工作，它只是意味着你需要在同一个域即测试你的代码。你的服务员

小开

展示

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function showHide(switchTextDiv, showHideDiv)
{
var std = document.getElementById(switchTextDiv);
var shd = document.getElementById(showHideDiv);
if (shd.style.display == "block")
{
shd.style.display = "none";
std.innerHTML = "<span style=\"display: block; background-color: yellow\">Show</span>";
}
else
{
if (shd.innerHTML.length <= 0)
{
shd.innerHTML = "<object width=\"100%\" height=\"100%\" type=\"text/html\" data=\"showhide_embedded.html\"></object>";
}
shd.style.display = "block";
std.innerHTML = "<span style=\"display: block; background-color: yellow\">Hide</span>";
}
}
</script>
</head>
<body>
<a id="switchTextDiv1" href="javascript:showHide('switchTextDiv1', 'showHideDiv1')">
<span style="display: block; background-color: yellow">Show</span>
</a>
<div id="showHideDiv1" style="display: none; width: 100%; height: 300px"></div>
</body>
</html>

Showhide _ embedded. html

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function load()
{
var ts = document.getElementById("theString");
ts.scrollIntoView(true);
}
</script>
</head>
<body onload="load()">
<pre>
some text 1
some text 2
some text 3
some text 4
some text 5
<span id="theString" style="background-color: yellow">some text 6 highlight</span>
some text 7
some text 8
some text 9
</pre>
</body>
</html>

小开

你可以使用 jQuery:

$("#topBar").on("click",function(){
$("#content").load("content.html");
});

小开

Github 上有一个插件可以将内容加载到元素中

Https://github.com/abdi0987/viajs

小开

我看到这个，觉得它看起来很漂亮，所以我对它进行了一些测试。

这看起来像是一种简洁的方法，但是在性能方面，它比使用 jQuery 加载函数加载页面或者使用 XMLHttpRequest 的普通 javascript 方法加载页面的时间要慢50% ，这两种方法大致相似。

我想这是因为在底层，它以完全相同的方式获取页面，但是它也必须处理构造一个全新的 HTMLElement 对象的问题。

总之，我建议使用 jQuery。该语法非常容易使用，并且它有一个结构良好的回调供您使用。它的速度也相对较快。普通方法的速度可能比普通方法快几毫秒，但语法令人困惑。我只会在不能访问 jQuery 的环境中使用它。

下面是我用来测试的代码-它是相当基础的，但是在多次尝试中，时间回来得非常一致，所以我会说精确到每次大约 +-5ms。测试是在我自己的家用服务器上运行的:

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
<div id="content"></div>
<script>
/**
* Test harness to find out the best method for dynamically loading a
* html page into your app.
*/
var test_times  = {};
var test_page   = 'testpage.htm';
var content_div = document.getElementById('content');


// TEST 1 = use jQuery to load in testpage.htm and time it.
/*
function test_()
{
var start = new Date().getTime();
$(content_div).load(test_page, function() {
alert(new Date().getTime() - start);
});
}


// 1044
*/


// TEST 2 = use <object> to load in testpage.htm and time it.
/*
function test_()
{
start = new Date().getTime();
content_div.innerHTML = '<object type="text/html" data="' + test_page +
'" onload="alert(new Date().getTime() - start)"></object>'
}


//1579
*/


// TEST 3 = use httpObject to load in testpage.htm and time it.
function test_()
{
var xmlHttp = new XMLHttpRequest();


xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
{
content_div.innerHTML = xmlHttp.responseText;
alert(new Date().getTime() - start);
}
};


start = new Date().getTime();


xmlHttp.open("GET", test_page, true); // true for asynchronous
xmlHttp.send(null);


// 1039
}


// Main - run tests
test_();
</script>
</body>
</html>

小开

如果您的 html 文件驻留在本地，那么使用 iframe 而不是标记。标签不能跨浏览器工作，主要用于 Flash

例如: <iframe src="home.html" width="100" height="100"/>

小开

以现代 Javascript 方式获取 HTML

这种方法利用了现代的 Javascript 特性，比如 async/await和 fetch API。它以文本形式下载 HTML，然后将其提供给容器元素的 innerHTML。

/**
* @param {String} url - address for the HTML to fetch
* @return {String} the resulting HTML string fragment
*/
async function fetchHtmlAsText(url) {
return await (await fetch(url)).text();
}


// this is your `load_home() function`
async function loadHome() {
const contentDiv = document.getElementById("content");
contentDiv.innerHTML = await fetchHtmlAsText("home.html");
}

await (await fetch(url)).text()可能看起来有点棘手，但它很容易解释。它有两个异步步骤，你可以像这样重写这个函数:

async function fetchHtmlAsText(url) {
const response = await fetch(url);
return await response.text();
}

有关更多细节，请参见获取 API 文档。

小开

$("button").click(function() {
$("#target_div").load("requesting_page_url.html");
});

或者

document.getElementById("target_div").innerHTML='<object type="text/html" data="requesting_page_url.html"></object>';

小开

当需要包含 header.php 或其他页面时，通常需要这样做。

在 Javascript 中，这很简单，特别是如果你有 HTML 页面，不想使用 php include 函数，但是你应该编写 php 函数，并将其作为 Javascript 函数添加到 script 标签中。

在这种情况下，您应该编写没有函数后跟名称 Just。脚本显示函数词，并启动 include header.php 例如，将 php include 函数转换为 script 标记中的 Javascript 函数，并将所有内容放在包含的文件中。

小开

试试看

async function load_home(){
content.innerHTML = await (await fetch('home.html')).text();
}

async function load_home() {
let url = 'https://kamil-kielczewski.github.io/fractals/mandelbulb.html'


content.innerHTML = await (await fetch(url)).text();
}

<div id="topBar"> <a href="#" onclick="load_home()"> HOME </a> </div>
<div id="content"> </div>

小开

使用这个简单的代码

<div w3-include-HTML="content.html"></div>
<script>w3.includeHTML();</script>
</body>```

小开

<script>
var insertHtml = function (selector, argHtml) {
$(document).ready(function(){


$(selector).load(argHtml);
 

});
var targetElem = document.querySelector(selector);
targetElem.innerHTML = html;
};


var sliderHtml="snippets/slider.html";//url of slider html
var items="snippets/menuItems.html";
insertHtml("#main",sliderHtml);
insertHtml("#main2",items);
</script>

当我试图向 main.HTML 中添加一个 HTML 片段时，这个方法就起作用了。请不要忘记在代码中添加 ajax 将 class 或 id 作为选择器传递，并将指向 HTML 代码片段的链接作为 argHtml传递

小开

我使用 jquery，我发现它更容易

$(function() {
$("#navigation").load("navbar.html");
});

然后在 html 页面上加载 javascript 文件

小开

加载 html 表单远程页面(我们可以访问 CORS)
解析页面特定部分的 result-html
将该部分页面插入当前页面的 div 中

//load page via jquery-ajax
$.ajax({
url: "https://stackoverflow.com/questions/17636528/how-do-i-load-an-html-page-in-a-div-using-javascript",
context: document.body
}).done(function(data) {


//the previous request fails beceaus we dont have CORS on this url.... just for illlustration...


//get a list of DOM-Nodes
var dom_nodes = $($.parseHTML(data));


//find the question-header
var content = dom_nodes.find('#question-header');


//create a new div and set the question-header as it's content
var newEl = document.createElement("div");
$(newEl).html(content.html());
   

//on our page, insert it in div with id 'inserthere'
$("[id$='inserthere']").append(newEl);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>part-result from other page:</p>
<div id="inserthere"></div>

如何使用 JavaScript 在 div 中加载 HTML 页面？

以现代 Javascript 方式获取 HTML