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

时间:2018-01-11 06:08:56

标签: 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

5 个答案:

答案 0 :(得分:1)

这样做:

不确定这些&#34;链接的格式&#34;如果您有权访问它们,那么您可以使用其中一种方法

使用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;
});

JS包含任何链接,但ID(哈希符号)

$('a[href!=#]').click(function () { 
    $("#myFrameID").attr("src", $("a:focus").attr("href"));
    $("#myFrameID").bind('load', function() { $("#myPageViewerDIV").html($("#myFrameID").contentDocument); });
    return false;
});

您或其他用户可以添加到此^^ /&#39;

这是做什么的:

  1. 创建隐藏的不可见IFrame
  2. 使用onclick事件处理程序绑定所有链接(或变体类型) (返回false,因此不会浏览链接
  3. 将链接加载到源
  4. 绑定到iframe
  5. 的onloaded事件
  6. 将iframe的根文档复制到您的选择中......
  7. <强> TL; DR

    未经测试,理论上应该

答案 1 :(得分: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>

答案 2 :(得分:0)

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

答案 3 :(得分:0)

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

答案 4 :(得分:-1)

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

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