更换一个<div>与另一个带有.innerHTML 的html 页面？
[英]Replace a <div> with another html page with .innerHTML?
问题描述
我目前正在开发一个项目，该项目允许在单击某些指向它们的链接时将不同的网页加载到我的页面中的<div>中，我已经阅读了下面的线程，但我不知道如何做 jquery，我想知道页面是否可以加载 .innerHTML ？ 有没有办法只用 css 和 javascript 和 html 来做到这一点？
基本上我想要的是类似 w3.includeHTML() 的东西，其中整个页面加载并显示自己不是在框架内而是作为页面的一部分
这是我的项目文件的链接，使用的主要 html 页面是 index.html，要链接到的 html 页面是 greatwallofchina.html：
https://drive.google.com/file/d/1yAWZIIhBKHjwkiwwNhXUsQEVVQdjTxrM/view?usp=sharing
6 个解决方案
解决方案1
1 2018-01-11 06:20:18
您可以尝试在您的 div 中加载页面，如下所示
使用 JAVASCRIPT::
<div id="result">
</div>
<script type="text/javascript">
function myFunction() {
document.getElementById("result").innerHTML = '<object type="text/html" data="/path/of/htmlpage.html" ></object>';
}
<script>
使用jQuery ::
$(document).ready( function() {
$("#yourLinkId").on("click", function() {
$("#YourDiv").load("../pages/PageYouWantToShow.html");
});
});
解决方案2
1 2018-01-11 06:31:38
做这个：
不确定这些“链接”的格式如果您可以访问它们，那么您可以使用以下几种方法之一
使用 HTML 和以下 Javascript (JS) 的任何变体
HTML
<iframe id="myFrameID" src="" width="0px" height="0px" style="display:hidden;visibility: hidden"></iframe>
<div id="myPageViewerDIV"></div>
带有选择器的 JS
$('a[href="formatoflinkhere"]').click(function () {
$("#myFrameID").attr("src", $("a:focus").attr("href"));
$("#myFrameID").bind('load', function() { $("#myPageViewerDIV").html($("#myFrameID").contentDocument); });
return false;
});
带有任何链接的 JS
$('a').click(function () {
$("#myFrameID").attr("src", $("a:focus").attr("href"));
$("#myFrameID").bind('load', function() { $("#myPageViewerDIV").html($("#myFrameID").contentDocument); });
return false;
});
带有任何链接但 ids 的 JS（井号）
$('a[href!=#]').click(function () {
$("#myFrameID").attr("src", $("a:focus").attr("href"));
$("#myFrameID").bind('load', function() { $("#myPageViewerDIV").html($("#myFrameID").contentDocument); });
return false;
});
您或其他用户可以添加到此 ^^/'
这是做什么的：
- 创建一个隐藏的不可见 IFrame
- 将所有链接（或变体类型）与 onclick 事件处理程序绑定（返回 false，因此不浏览链接
- 将链接加载到源中
- 绑定到 iframe 的 onloaded 事件
- 将 iframe 的根文档复制到您选择的潜水...
TL;博士
未经测试，理论上应该可以工作。
解决方案3
1 已采纳 2018-01-11 07:03:05
如果您想在另一个内显示另一个 html，请使用 object 元素，您可以使用 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>
解决方案4
0 2018-01-13 06:10:10
$(document).ready( function() {
$("#yourLinkId").on("click", function() {
$("#YourDiv").load("../pages/PageYouWantToShow.html");
});
});
解决方案5
0 2022-06-15 10:02:57
functionyouFunc(){
document.getElementById("element").innerHTML='<object type="text/html" data="/statics/health.html"</object>'
}
解决方案6
-1 2018-01-11 06:12:39
它很简单 - 只需在单击链接时调用一个 javascript 函数并按如下方式加载您的 html
$("#divid").load('path of file')
单击一个<a>并将该innerHTML插入另一个HTML页面</a>时如何获取innerHTML <a>？</a>
[英]How to get innerHTML when clicking an <a> and inserting that innerHTML on another HTML page?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.