无法在html中使用JavaScript页面加载功能
无法在html中使用JavaScript页面加载功能
提问于 2018-01-03 12:08:03
当我点击侧边栏中的一个菜单时，我想加载一个新页面。但是JavaScript加载函数不起作用。
$(document).ready(function(){
$( 'button' ).click(function() {
$('#load').load('page1.html');
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="load"></div>
<button>Click to load a new page</button>
请帮帮忙。
Stack Overflow用户
发布于 2018-01-03 12:42:30
有几件事-
- 将JS放在HTML后面，以确保所有具有引用ID的元素都已加载，否则代码可能无法工作。
- 你甚至不需要JQuery来做你想做的事情。请参阅以下代码片段，它使用了所有现代浏览器中内置的fetch() API (请注意，如果在此页面上运行下面的代码片段，将显示一个错误，因为page1.html在StackOverflow上不可用)“
<html>
<head>
<title>Hello</title>
</head>
<body>
<div id="load" ></div>
<button id="clickme">Click to load a new page</button>
<script type="text/javascript">
(function() {
document.getElementById("clickme").onclick = function() {
fetch("page1.html")
.then(function(response) {
response.text().then(function (text) {
document.getElementById("load").innerHTML = text;
})
})
.catch(function(e) {
document.getElementById("load").innerHTML = `Error loading: ${e.message}`;
})
}
}());
</script>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48071027
复制相关文章
相似问题
腾讯云开发者
