javascript - 在谷歌浏览器的 div 中加载 html 页面

Question

下面是2个html页面，

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Commision </title>
<script type="text/javascript" src="JS/jquery-1.9.1.min.js"></script>


<script type="text/javascript">

function loadpage(x)
{
    $('#centre').empty().load(x, function () {
    window.alert('Request complete');
});
}

</script>

<style type="text/css">
<!--
#main {
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    z-index:1;
}
#header {
    position:absolute;
    left:0px;
    top:0px;
    background:url(Images/header1.png);
  -moz-background-size: auto, cover; /* Firefox 3.6 */ 
    background-size: auto, cover; /* Chrome, Firefox 4.0+, Safari 4.1+, Opera 10+ and IE9 */
    width:100%;
    height:14%;
    overflow: hidden;

    z-index:250;
}
#centre {
    position:absolute;
    left:0px;
    top:14%;
    width:100%;
    height:82%;
    z-index:240;
}
#smoothmenu1 {
    position:absolute;
    right:0px;
    width:40%;
    bottom:0px;
    height:26px;
        overflow: hidden;

    z-index:220;
}
#footer {
    position:absolute;
    left:0px;
    bottom:0px;
    width:100%;
    height:4%;
        overflow: hidden;

    z-index:2;
}

.com {
    font-family:Arial, Helvetica, sans-serif;
font-size:12px; 
}
#cntr {
    position:absolute;
    left:0px;
    top:-1px;
    width:100%;
    height:100%;
    z-index:50;
}
#insideCentre {
    position:absolute;
    left:0px;
    top:10%;
    width:100%;
    height:90%;
    z-index:12;
}
#initProfile {
    position:absolute;
    left:0px;
    top:0px;
    width:70%;
-moz-border-radius:12px;
-webkit-border-radius:12px;
border-radius:14px;
    height:100%;
    z-index:14;
}
.aFont
{
    font-family:Arial, Helvetica, sans-serif;
    font-weight:bold;
    font-size:20px;
    color:#FFF;
    padding-top: 2px;
}

#aboutMSL {
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    height:10%;
-moz-border-radius:12px;
-webkit-border-radius:12px;
border-radius:12px; 
background:url(Images/gclip.png);
    overflow: hidden;


    z-index:18;
}
#aboutBody {
    position:absolute;
    left:0px;
    top:14%;
    width:100%;
    height:86%;
border-right-color:#666;
    border-left-style:dotted;
        overflow: hidden;

    border-left-width:thin; z-index:23;
}
#tech {
    position:absolute;
top :50%;
right:0px;
-moz-border-radius:12px;
-webkit-border-radius:12px;
border-radius:12px; width:30%;
    height:30%;
    z-index:19;
}
#tech_header {
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    height:30%;
-moz-border-radius:12px;
-webkit-border-radius:12px;
border-radius:12px;
    background:url(Images/gclip.png);
    overflow: hidden;

    z-index:20;
}
#tech_body {
    position:absolute;
    left:0px;
bottom:10%;
width:100%;
    height:50%;
    z-index:21;
        overflow: hidden;

}
.sFont {
    font-family:Verdana, Geneva, sans-serif;
    font-size:12px;
}
#sShow {
    position:absolute;
    top:0px;
    right:0px;
    width:30%;
    height:40%;
    z-index:51;
}
-->
</style>
</head>
<body>
<div id="main">
<div id="header">
<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li><a href="#"  onclick="loadpage('a.html')">A</a></li>
<li><a href="#" onClick="loadpage('c.html')">S</a></li>
<li><a href="#" onclick="loadpage('v.html')">C</a></li>
<li><a href="#">Commx</a></li>
<li><a href="#" onclick="loadpage('b.html')">V</a></li>
</ul>
<br style="clear: left" />
</div>
</div>
<div id="centre">

</div>

<div id="footer" align="center" class="com" >Commision</div>
</div>
</body>
</html>

和

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>


<style type="text/css">
#top {
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    height:10%;

            background:url(Images/gclip.png);

    z-index:3;
}
#c1  {
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    height:25px;
overflow:hidden;
margin-top:25px;
    z-index:5;
            border-bottom: 0.5px solid #778;

}

</style>

</head>

<body>
<div id="PCentre">
<div id="c1">Column 1</div>
<div id="Pbody"></div>

</div>

</body>
</html>

我正在尝试使用查询将第二个 html 页面加载到第一个 html 页面的中心 div 中，该应用程序在 Firefox 中运行良好，但在 chrome 中无法正常工作，在 chrome 中，第 2 页中的 div 元素没有像我运行它时那样放置Firefox 中的应用程序（我尝试从 localhost/127.0.0.1 运行应用程序）

score 0 · Accepted Answer

@shnisaka 的评论是正确的 - 您正在尝试将完整页面、doctype 和所有内容加载到另一个页面中，这本质上表明您正在尝试将独立页面加载到另一个独立页面中。要做到这一点，同时保持每个页面的独立性，唯一的方法是使用 iFrame。如果这不是您的意图，您可能需要重新考虑您的 IA。

如果您的目标是简单地提取文档的某些特定部分，例如正文和样式表，那么最佳实践是提取这些节点/元素并插入它们。但是，这也会将您的页面打开到可能存在冲突的样式表和/或脚本。

这个问题可以通过代码解决方案按原样解决，但我强烈建议你看看你在做什么，想想你的目标是什么，并从兼容性、可扩展性和可维护性的角度考虑潜在的问题。

score 0 · Accepted Answer

引用jQuery API：

加载页面片段

与不同，该.load()方法$.get()允许我们指定要插入的远程文档的一部分。这是通过url参数的特殊语法来实现的。如果字符串中包含一个或多个空格字符，则假定字符串中第一个空格之后的部分是确定要加载的内容的 jQuery 选择器。

我们可以修改上面的示例以仅使用获取的文档的一部分：

$('#result').load('ajax/test.html #container');

您需要为<body>第二个页面的提供一个 ID，并在调用中引用此 IDload以便将正文的内容插入到您的<div>中，而不是将整个 HTML 页面插入<div>会导致无效 HTML 的。

score 0 · Accepted Answer

我的建议是在里面加载特定的包装器 div：

<ul>
   <li><a href="#"  onclick="loadpage('a.html #PCentre')">A</a></li>
   <li><a href="#" onClick="loadpage('c.html #PCentre')">S</a></li>
   <li><a href="#" onclick="loadpage('v.html #PCentre')">C</a></li>
   <li><a href="#">Commx</a></li>
   <li><a href="#" onclick="loadpage('b.html #PCentre')">V</a></li>
</ul>   //-----------------------------------^^^^^^^^----------this one

javascript - 在谷歌浏览器的 div 中加载 html 页面

3 回答 3

Related

Reference