在Google Chrome浏览器的div中加载HTML页面

Question

below are 2 html pages , 以下是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>

and 和

<!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>

I'm trying to load the 2nd html page into centre div of 1st html page using query , the application works fine in firefox but not in chrome , in chrome the div elements in page 2 are not getting placed as they were when i ran this application in firefox (i tried to run the application from localhost/127.0.0.1) 我正在尝试使用查询将第二个html页面加载到第一个html页面的中心div中，该应用程序在firefox中工作正常，但在chrome中不工作，在chrome中，第2页中的div元素没有像我运行时那样被放置firefox中的应用程序（我尝试从localhost / 127.0.0.1运行该应用程序）

Answer 1

My suggestion is to load the particular wrapper div inside: 我的建议是在其中加载特定的包装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

Answer 2

Quoting the jQuery API : 引用jQuery API ：

Loading Page Fragments 加载页面片段

The .load() method, unlike $.get() , allows us to specify a portion of the remote document to be inserted. 与$.get()不同， .load()方法允许我们指定要插入的远程文档的一部分。 This is achieved with a special syntax for the url parameter. 这可以通过使用url参数的特殊语法来实现。 If one or more space characters are included in the string, the portion of the string following the first space is assumed to be a jQuery selector that determines the content to be loaded. 如果字符串中包含一个或多个空格字符，则假定字符串中第一个空格之后的部分是确定要加载内容的jQuery选择器。

We could modify the example above to use only part of the document that is fetched: 我们可以修改上面的示例以仅使用获取的文档的一部分：

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

You'll want to give the <body> of the second page an ID, and reference this ID in your call to load in order to insert the contents of the body into your <div> , rather than inserting an entire HTML page into the <div> which results in invalid HTML. 您需要为第二页的<body>提供一个ID，并在load调用中引用此ID，以便将body的内容插入到<div> ，而不是将整个HTML页面插入到<div>导致无效的HTML。

Answer 3

The comment by @shnisaka is correct - the fact that you are trying to load a complete page, doctype and all, into another page inherently suggests that you are trying to load a stand-alone page into another stand-alone page. @shnisaka的评论是正确的-实际上，您试图将完整的页面，文档类型以及所有页面加载到另一个页面中，这实际上表明您正在尝试将一个独立页面加载到另一个独立页面中。 The only way to do this, while maintaining the independence of each page is to use an iFrame. 在保持每个页面独立性的同时，执行此操作的唯一方法是使用iFrame。 If this is not your intention, you may want to re-think your IA. 如果这不是您的意图，则您可能需要重新考虑您的IA。

If your goal is to simply extract some particular section(s) of the document, eg the body and stylesheets, then the best practice would be to extract those nodes/elements and insert them. 如果您的目标是仅提取文档的某些特定部分，例如正文和样式表，则最佳实践是提取那些节点/元素并插入它们。 However, this will also open your page up to potentially conflicting stylesheets and/or scripts. 但是，这也会打开您的页面，打开可能存在冲突的样式表和/或脚本。

This issue can be resolved as-is via a code solution, but I highly recommend that you take a look at what you are doing, think about what your goal is, and consider the potential issues from a compatibility, extensibility, and maintainability standpoint. 可以通过代码解决方案按原样解决此问题，但我强烈建议您看一下自己在做什么，考虑目标是什么，并从兼容性，可扩展性和可维护性的角度考虑潜在的问题。

在Google Chrome浏览器的div中加载HTML页面

问题描述

3 个解决方案

解决方案1
0 2013-03-20 19:12:09

解决方案2
0 2013-03-20 19:19:04

解决方案3
0 2013-03-20 19:46:10

在Google Chrome浏览器的div中加载HTML页面

问题描述

3 个解决方案

解决方案1 0 2013-03-20 19:12:09

解决方案2 0 2013-03-20 19:19:04

解决方案3 0 2013-03-20 19:46:10

解决方案1
0 2013-03-20 19:12:09

解决方案2
0 2013-03-20 19:19:04

解决方案3
0 2013-03-20 19:46:10