Javascript 更改固定页面中的可变内容_Javascript

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

javascript

Javascript 更改固定页面中的可变内容,javascript,Javascript,我应该创建一个索引页，其中一些部分（如页眉和页脚）是固定的，但主要内容是可变的，我想我必须将我的内容设置为一个iframe，并用javascript更改iframe src，但我不知道如何做到这一点。我该怎么做？还有其他的解决方案吗？嗨，也许有比框架更好的选择（这是“坏的”实践）如果你的项目适合你，你可以使用jQuery为基础的脚本作为或者您选择的其他一些：这样，您将以更现代的方式表示您的内容。但这始终取决于最终结果必须是什么。因此，如果不是答案，请提供更多细节。您可以使用css来完成

我应该创建一个索引页，其中一些部分（如页眉和页脚）是固定的，但主要内容是可变的，我想我必须将我的内容设置为一个iframe，并用javascript更改iframe src，但我不知道如何做到这一点。

我该怎么做？还有其他的解决方案吗？

嗨，也许有比框架更好的选择（这是“坏的”实践）如果你的项目适合你，你可以使用jQuery为基础的脚本作为

或者您选择的其他一些：这样，您将以更现代的方式表示您的内容。但这始终取决于最终结果必须是什么。因此，如果不是答案，请提供更多细节。

您可以使用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>


身体{
边际：0px；
}
#包装纸{
宽度：1000px；
边际上限：0；
右边距：自动；
页边距底部：0；
左边距：自动；
}
#包装器#头{
宽度：1000px；
高度：80px；
背景色：#C90；
位置：固定；
浮动：左；
}
#主包装{
浮动：左；
字体系列：Arial，无衬线；
字体大小：12px；
颜色：#333；
填充物：5px；
宽度：990px；
边缘顶部：80px；
边缘底部：80px；
}
#包装器#页脚{
背景色：#C60；
高度：80px；
宽度：1000px；
位置：固定；
底部：0px；
浮动：左；
}
标题
Lorem ipsum dolor sit amet，是一位杰出的领导者。杜伊斯·利古拉·洛雷姆、康塞卡特·埃吉特、特里斯蒂克·内克、拍卖人奎斯、普卢斯。维瓦姆斯大学。这是我的生活。埃尼安·维韦拉·马莱苏阿达·利伯罗。Fusce ac quam。多尼克·内克。维尼纳蒂斯学院。在调味品奥古斯·洛雷姆·诺特鲁斯中，福西布斯、阿奎姆·阿奎姆、弗林吉利亚·奎姆和奥古斯·洛雷姆·诺特鲁斯。Pellentesque id arcu非sem placerat iaculis。库拉比图尔·波苏尔、拉齐尼亚·库马森、奥奇元素尼姆·尼伯、乌托邦·厄罗斯·萨皮恩·内克·萨皮恩。内克阿库吊牌，ultrices commodo，Pellentsque sit amet，ultrices ut，ipsum。毛里斯和厄洛斯·埃格特·埃特·埃特·埃特·埃特·埃特·埃特·埃特·埃特·埃特·埃特·埃特·埃特·埃特·埃特·埃特·达比·莫利斯。毛里斯·劳里特·波苏尔·奥迪奥。Nam ipsum ligula、ullamcorper eu、弗林利亚at、拉齐尼亚ut、奥古斯都。努拉姆·努克

页脚

然后您可以使用Ajax将数据从服务器加载到服务器

只需查找jquery.Ajax，这会很简单。我不懂Ajax，我如何才能只更改页面的一部分？显示您尝试过的内容或您拥有的内容我认为您需要遵循我的链接复制粘贴工作示例并构建您的页面您不需要AJAX，可以一次生成所有内容，但不会显示它。哇，谢谢，我也讨厌更改帧它太难看了，我想我的问题解决了。这个脚本一次加载所有页面？是的，它一次加载它们，因为不同的div或li取决于所选的脚本，只是花了一些时间学习脚本，你会发现它非常简单，而且你以后会有很多其他选择。顺便说一句，如果你对我的答案感到满意，你能将我的答案标记为已回答吗？也谢谢你，你能给出+1:）