用<div>另一个 html 页面替换 .innerHTML？

？

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

将

替换为另一个 HTML 页面

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

以下是我的项目文件的链接，正在使用的主 html 页面是 index.html要链接到的 html 页面是 greatwallofchina.html：

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

如果你想在另一个html中显示另一个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>

这样做：

不确定这些"链接"的格式，如果您可以访问它们，那么您可以使用以下几种方式之一

使用 HTML 和以下 Javascripts (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;
});

带有除 id(哈希符号)以外的任何链接的 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 的加载事件
将 iframe 的根文档复制到您选择的潜水中...

TL;博士

未经测试，理论上应该有效。

您可以尝试在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");
});
});

$(document).ready( function() {
$("#yourLinkId").on("click", function() {
$("#YourDiv").load("../pages/PageYouWantToShow.html");
});
});

functionyouFunc(){
document.getElementById("element").innerHTML='<object type="text/html" data="/statics/health.html"</object>'
}

它很简单 - 只需在单击链接时调用 javascript 函数并按如下方式加载您的 html

$("#divid").load('path of file')

相关内容

最新更新

热门标签：