Question

我应该创建一个索引页面，其中一些部分如页眉和页脚是固定的，但主要内容是可更改的，我想我必须将我的内容设置为iframe并使用javascript更改iframe src，但我不知道如何做到这一点。我怎样才能做到这一点？还有其他解决方案吗？

Answer 1

嗨，也许有更好的选择要考虑比帧（这是“坏”的做法）如果适合你的项目，你可以使用基于jquery的脚本Pagify

或您选择的其他一些：JQUERY ONE PAGE SCRIPTS 通过这种方式，您将以更现代的方式表达您的内容。但它总是取决于最终结果必须是什么。如果不是答案，请提供更多细节。

Answer 2

你可以用css

来做

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.7.1.js"></script>
<style type="text/css">
body {
    margin: 0px;
}
#wrapper {
    width: 1000px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
}
#wrapper #header {
    width: 1000px;
    height: 80px;
    background-color: #C90;
    position: fixed;
    float: left;
}
#wrapper #main {
    float: left;
    font-family: Arial, sans-serif;
    font-size: 12px;
    color: #333;
    padding: 5px;
    width: 990px;
    margin-top: 80px;
margin-bottom: 80px;
}
#wrapper #footer {
    background-color: #C60;
    height: 80px;
    width: 1000px;
    position: fixed;
    bottom: 0px;
    float: left;
}
</style>
<script>

</script>
</head>
<body>
    <div id="wrapper">
        <div id="header">
            Header
        </div>
        <div id="main">
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
          <p>.....</p>
        </div>
        <div id="footer">footer</div>
    </div>
</body>
</html>

然后，您可以使用Ajax

从服务器加载数据

更改固定页面中的可更改内容

2 个答案: