将 <div> 替换为另一个带有 .innerHTML 的 html 页面？答案

【问题标题】：Replace a <div> with another html page with .innerHTML?将 <div> 替换为另一个带有 .innerHTML 的 html 页面？
【发布时间】：2018-01-13 14:11:37
【问题描述】：

我目前正在做一个项目，当点击某些指向它们的链接时，允许将不同的网页加载到我的页面中的 <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

【问题讨论】：

也许你可以用这个成名标签
是的，您可以使用XMLHttpRequest通过AJAX加载数据，并在页面中设置.innerHTML。您也可以使用新的fetch api，但它还没有得到很好的支持，需要polyfill。
@NavankurChauhan 标签的问题是它无法在html5中工作，它可能无法在使用它的浏览器上正常运行。
没有什么太大的变化，只是知道其他 html 页面的 id 或 class 将您的设计更改放入样式标签或使用 javascript 但不要忘记给出“！important”，这样你就可以切换到其他html页面
另请注意，如果其他网页不在同一个域中，您可能会遇到Same Origin 问题。

标签： javascript html css

【解决方案1】：

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

【讨论】：

如果你发布你的风格，我可以做一个只有 css 的解决方案。
嗨，虽然我可以将网页放入页面中，但结果并没有我预期的那么好。
这是我的意思的图像：
如您所见，显示网页已实现，但它仅在其自己的框架内滚动页面
所以你只想要一个滚动条而不是 2 个正确吗？

【解决方案2】：

这样做：

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

使用 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;DR

未经测试，理论上应该可以工作。

【讨论】：

【解决方案3】：

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

【讨论】：

OP 试图避免使用 jQuery。您的答案与已被否决的答案没有显着差异。
添加了等效的 Js

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

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

【讨论】：

他正在尝试不使用 jquery。