javascript - 使用 .innerHTML 将 <div> 替换为另一个 html 页面?

标签 javascript html css

我目前正在进行一个元素,该元素允许将不同的网页加载到 <div> 中在我的页面中,当单击指向它们的某些链接时,我已经阅读了下面的线程,但我不知道如何使用 jquery,我想知道是否可以使用 .innerHTML 加载这些页面?有没有办法只使用 css、javascript 和 html 来做到这一点?

Replace <div> with another HTML page

基本上我想要的是 w3.includeHTML() 之类的东西,其中整个页面加载并显示自身而不是在框架内,而是作为页面的一部分

这是我的元素文件的链接,正在使用的主要 html 页面是 index.html,要链接到的 html 页面是 greatwallofchina.html:

https://drive.google.com/file/d/1yAWZIIhBKHjwkiwwNhXUsQEVVQdjTxrM/view?usp=sharing

最佳答案

如果你想在另一个使用对象元素中显示另一个 html,你可以使用 innerHTML 来实现这一点。下面是每个链接的 2 个函数,一个将加载一页,另一个将加载第二页。另一个选项要求您发布样式表 希望能帮助到你。此解决方案的更新是删除额外的滚动条。

<script type="text/javascript">
function nextpage(){
document.getElementById('pageContent').innerHTML = "<object style=\"overflow:hidden; width: 99.25%; height: 101%\" width=\"100%\" height=\"101%\" data=\"http://localhost/test/page1.php\"></object>" ;
}
function nextpageb(){
document.getElementById('pageContent').innerHTML = "<object style=\"overflow:hidden; width: 99.25%; height: 101%\" width=\"100%\" height=\"101%\"  data=\"http://localhost/test/page2.php\"></object>" ;
}
</script>
</head>
<body style="float:left; overflow:hidden; width: 100%; height: 101%">
<nav>
<h2 class="hidden">Our navigation</h2>
<ul>
<li><a onclick="nextpage();">Home</a></li>
<li><a onclick="nextpageb();">Contact</a></li>
</ul>
</nav>
<div id="pageContent">Hello motto </div>

关于javascript - 使用 .innerHTML 将 <div> 替换为另一个 html 页面?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48200752/

相关文章:

javascript - 如何使用 Puppeteer 将 css 类添加到元素

javascript - 编写一个带有方法的类

php - 想要将目录中的所有php文件渲染或生成为静态html

css - 在 IE 中悬停之前,导航链接显示的边距错误

javascript - ng-model 未在 has-error 类中传递

javascript - Grunt - fatal error 未定义不是函数

javascript - PHPExcel 在 HTML 标记 <B> 和 <strong> 之间加粗文本

html - 高度 :100% does not work when using Semantic-UI

html - 默认 css 如何影响呈现的 html 对象页面

html - 页脚 float 在 div 之上