0

以下は 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>

query を使用して 2 番目の html ページを 1 番目の html ページの中央の div にロードしようとしています。アプリケーションは firefox では正常に動作しますが、chrome では動作しません。chrome では、ページ 2 の div 要素が、これを実行したときのように配置されません。 Firefox のアプリケーション (localhost/127.0.0.1 からアプリケーションを実行しようとしました)

4

3 に答える 3

0

@shnisakaによるコメントは正しいです-完全なページ、doctype、およびすべてを別のページにロードしようとしているという事実は、本質的に、スタンドアロンページを別のスタンドアロンページにロードしようとしていることを示唆しています。各ページの独立性を維持しながらこれを行う唯一の方法は、iFrameを使用することです。これが意図していない場合は、IAを再考することをお勧めします。

ボディやスタイルシートなど、ドキュメントの特定のセクションを単純に抽出することが目標である場合、ベストプラクティスは、それらのノード/要素を抽出して挿入することです。ただし、これにより、競合する可能性のあるスタイルシートやスクリプトが表示される可能性もあります。

この問題はコードソリューションを介してそのまま解決できますが、実行していることを確認し、目標を考え、互換性、拡張性、および保守性の観点から潜在的な問題を検討することを強くお勧めします。

于 2013-03-20T19:46:10.570 に答える
0

私の提案は、特定のラッパー 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
于 2013-03-20T19:12:09.723 に答える
0

jQuery APIの引用:

ページフラグメントの読み込み

この.load()メソッドは、 とは異なり$.get()、挿入するリモート ドキュメントの一部を指定できます。これは、パラメーターの特別な構文で実現されurlます。文字列に 1 つ以上のスペース文字が含まれている場合、最初のスペースに続く文字列の部分は、読み込まれるコンテンツを決定する jQuery セレクターと見なされます。

上記の例を変更して、取得したドキュメントの一部のみを使用することができます。

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

<body>2 番目のページの に ID を指定し、この ID を呼び出しで参照して、本文の内容を にload挿入すると、HTML ページ全体を に挿入して HTMLが無効になるのではありません。<div><div>

于 2013-03-20T19:19:04.957 に答える