使用.innerHTML将一个<div>替换为另一个HTML页面？

Question

使用.innerHTML将一个<div>替换为另一个HTML页面？

3

我目前正在开发一个项目，允许在单击链接时将不同的网页加载到我的页面中的<div>中。我已经阅读了下面的线程，但我不知道如何使用jquery，我想知道是否可以使用.innerHTML加载页面？是否有只用CSS、JavaScript和HTML就可以实现的方法？

使用另一个HTML页面替换<div>

基本上我想要的是类似于w3.includeHTML（）的东西，在其中整个页面加载并显示自己而不是框架作为页面的一部分。

这里是我的项目文件链接，主要的HTML页面是index.html，要链接的HTML页面是greatwallofchina.html：

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

- nTIAO

也许你可以使用 fame 标签来实现这个。 - Navankur Chauhan

@NavankurChauhan <frame>标签的问题在于它无法在html5中使用，而且可能无法在使用它的浏览器上正常运行。 - nTIAO

没有太多变化，只需要了解其他HTML页面的ID或类，将您的设计更改放入样式标签或使用JavaScript，但不要忘记给予“！important”，这样您就可以在其他HTML页面中进行更改。 - Darshan Dave

另外请注意，如果其他网页不在同一域上，您可能会遇到同源策略问题。 - Jon P

是的，我确实想以那种方式查看它。 - nTIAO

显示剩余3条评论

6个回答

1

您可以尝试按照以下方式在您的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");
        });
    });

- Navankur Chauhan

OP试图避免使用jQuery。你的答案与已经被投票否决的答案没有显著区别。 - Jon P

添加了JS的等效代码 - Navankur Chauhan

1

请执行以下操作：

如果您可以访问这些“链接”，但不确定其格式，则可以使用下列几种方式之一

使用HTML和以下任何Javascripts（JS）的变体

HTML

<iframe id="myFrameID" src="" width="0px" height="0px" style="display:hidden;visibility: hidden"></iframe>
<div id="myPageViewerDIV"></div>

使用选择器的JavaScript

$('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;
});

JS中的任何链接，但不包括ID（即井号符号）。

$('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的根文档复制到您选择的dive...

TL;DR

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

- Dean Van Greunen

0

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

- Pardeep

0

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

- kosh

4

欢迎来到 Stack Overflow！请阅读[答案]并[编辑]您的问题，以包含解释此代码将如何解决手头的问题。请牢记，您不仅要解决问题，还要向原帖作者和未来的读者传授知识。 - Adriaan

-1

很简单 - 只需在点击链接时调用JavaScript函数并按以下方式加载您的HTML。

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

- Deepak Singh

2

他正在尝试在没有使用jQuery的情况下完成这个任务。 - mattdevio

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jonny · Accepted Answer

如果您想在另一个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>