Question

我有两个单独的HTML文件（index.html和home.html）和一个javascript（bodyswapscript.js）文件。我试图弄清楚如何通过使用java脚本将home.html（仅）的主体交换到index.html的主体。基本上在HTML文件之间替换body标签。

我在下面发布了我的html代码和java脚本。 html快速而且很脏，所以我只对使用home.html从index.html交换身体信息感兴趣

1。）index.html

<head>
        <meta name="generator" content=
              "HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
        <meta charset="utf-8">

        <title> My Profile</title>
        <link rel="stylesheet" href="style.css" type="text/css">    
</head>

<header>
    <hgroup>
        <center><h1>Index</h1>
        <h4>index page</h4></center>
    </hgroup>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script src="bodyswapscript.js"></script>


<nav>
    <div id="wrapper">
        <div id="header">
            <ul>
                <li><a id="homeContainer" href="home.html">Home</a></li>
                <!-- <li><a id="testContainer" href='test.html'>test</a></li>
                <li><a id="pageContainer" href="page.html">page</a></li> -->
            </ul>
        </div>
    </div>

</nav>

</header>
<body>
    <article>

  <div id='swapcontent'>
  index page
  </div> 

</article>
    </body>
<footer>
    <p>&copy; copy right, all rights reserved.</p>
</footer>

2。）home.html

<header>
    <hgroup>
        <center><h1>home.html</h1>
        <h4>text</h4></center>
    </hgroup>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

</header>
<body>
    <article>

        <div id='swapcontent'>
            This is my home page
        </div> 

    </article>
</body>

3。）bodyswapscript.js

$(document).ready(function()
{
    $( 'li>a[id$="Container"]' ).click(function(event) 
    {
        event.preventDefault();
        var href = $(this).attr('href');
        alert("Loading " + href);
        $('#swapcontent').load(href);
        return false;
    });
});

4。）支持CSS

 * {
    font-family: Lucida Sans, Arial, Helvetica, sans-serif;
}

body {
    width: 720px;
    margin: 0px auto;
}

header h1 {
    font-size: 36px; 
    margin: 0px;
}

header h2 {
    font-size: 18px; 
    margin: 0px; 
    color: #888;
    font-style: italic;
}

nav ul {
    list-style: none; 
    padding: 0px; 
    display: block;
    clear: right; 
    background-color: #2B60DE;
    padding-left: 4px; 
    height: 24px;
}

nav ul li {
    display: inline; 
    padding: 0px 20px 5px 10px;
    height: 24px; 
    border-right: 1px solid #ccc;
}

nav ul li a {
    color: #EFD3D3; 
    text-decoration: none;
    font-size: 13px; 
    font-weight: bold;
}

nav ul li a:hover {
    color: #fff;
}

article > header time {
    font-size: 14px; 
    display: block; 
    width: 26px;
    padding: 2px; 
    text-align: center; 
    background-color: #993333;
    color: #fff; 
    font-weight: bold; 
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px; 
    border-radius: 6px; 
    float: left;
    margin-bottom: 10px;
}

article > header time span {
    font-size: 10px; 
    font-weight: normal;
    text-transform: uppercase;
}

article > header h1 {
    font-size: 20px; 
    float: left;
    margin-left: 14px; 
    text-shadow: 2px 2px 5px #333;
}

article > header h1 a {
    color: #993333;
}

article > section header h1 {
    font-size: 16px;
}

article p {
    clear: both;
}

footer p {
    text-align: center; 
    font-size: 12px;
    color: #888; 
    margin-top: 24px;
}

此代码来自以下网址：http://jsfiddle.net/Christophe/hj9ry/1/

Answer 1

更正无效html，在<body>包含home.html内容的包装父元素;使用.load()中的片段标识符引用包装元素调用home.html;使用.unwrap()删除index.html complete函数.load()处的包装元素

的index.html

<!doctype html>
<html>

<head>
  <meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
  <meta charset="utf-8">

  <title> My Profile</title>
  <link rel="stylesheet" href="style.css" type="text/css">
</head>


<body>
  <header>
    <hgroup>
      <center>
        <h1>Index</h1>
        <h4>index page</h4></center>
    </hgroup>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script src="bodyswapscript.js"></script>


    <nav>
      <div id="wrapper">
        <div id="header">
          <ul>
            <li><a id="homeContainer" href="home.html">Home</a></li>
            <!-- <li><a id="testContainer" href='test.html'>test</a></li>
                <li><a id="pageContainer" href="page.html">page</a></li> -->
          </ul>
        </div>
      </div>

    </nav>

  </header>
  <article>

    <div id='swapcontent'>
      index page
    </div>

  </article>
  <footer>
    <p>&copy; copy right, all rights reserved.</p>
  </footer>
</body>

</html>

home.html的

<!doctype html>
<html>
<head></head>
<body>
  <div id="body">
  <header>
    <hgroup>
        <center><h1>home.html</h1>
        <h4>text</h4></center>
    </hgroup>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

</header>
    <article>

        <div id='swapcontent'>
            This is my home page
        </div> 

    </article>
    </div>
</body>
</html>

bodyswapscript.js

$(document).ready(function() {
  $('li>a[id$="Container"]').click(function(event) {
    event.preventDefault();
    var href = $(this).attr('href');
    // alert("Loading " + href);
    $('body').load(href + " #body", function() {
      $("#body *:first").unwrap()
    });
    return false;
  });
});

plnkr http://plnkr.co/edit/r8WTsQ9Xm3ZLsRp8nwLr?p=preview

Answer 2

您可以在html中使用IFrame在homw.html中显示index.html的内容

或者您可以使用在您的家庭档案中

在两个HTML文件之间交换正文标记

2 个答案: