div+css布局的网站如何实现 html的框架效果,刷新部分页面,而且超出是整个页面滚动。

如题。我是自学,没找到这些内容的教程。如图,百度上人家帮写了个隐藏右边div块的JS,所以目前是所有内容都在一个页面。但是后面有些页面内容太多了,这样很不好。于是我就去试了htlm的框架(frame),右边内容就调用不同的单独页面,但是右边内容如果超出就会单独出现滚动条。 怎么样才能整体滚动?
如果要用JS的话,可以贴出来,并且告知如何使用吗?因为我完全没学过JS。或者告知某个教程网址。不知道这个叫什么,搜半天也没什么结果。
重申一下想得到的效果:点击左边导航,右边出现另一个页面的内容,如果这个内容超出一个屏幕,那么出现滚动条是整个网站滚动。

第1个回答  推荐于2018-05-10
通过div嵌套iframe实现,自动获取目标框架的高度和宽度.
<script type="text/javascript">
$(function () {
document.getElementById("ifm").src ="";//Url地址
$("#ifm").load(function () {
var h = document.body.clientHeight;
var w = document.body.clientWidth;
document.getElementById("ifm").height = h + "px";
document.getElementById("ifm").width = w + "px";

});
})
</script>
<body style="overflow-y:hidden;overflow-x:hidden">
<div id="pageone" style="">
<iframe name="ifm" id="ifm" scrolling="yes" style="background-color: transparent;" marginwidth="0" marginheight="0" frameborder="0">
</iframe>
</div>
</body>本回答被网友采纳
第2个回答  推荐于2016-11-20
可以用iframe + js

<script language="javascript">
function change(src)
{
ifr.location.src="+src+";
}
</script>
<iframe id="ifr" src=""></iframe>

左边的导航加个链接
<a href="#" onclick="change(--这里要写iframe中需要显示的页面--)"></a>

亲测可用

纯手打,望采纳追问



#nav {width:200px;}

function change(src)
{
ifr.location.src="+src+";
}

导航1

不行。

追答

不知道你是用什么编辑的,还有你的浏览器是什么,不同浏览器对于js方法的辨别也不尽相同,你可以把js换成这样,基本上可以应对目前主流的浏览器
function change(src){
var url=window.frames['ifr'].document.location.href;
if(url=='about:blank') document.getElementById("ifr").src = src;
}
只是复杂了一点点,你应该可以看懂的吧,要简单点儿的话
function change(src){
document.getElementById("ifr").src = src;
}
这样就可以了,只不过没有上面的方法保险

本回答被提问者采纳
第3个回答  2012-12-19
有一种方法 用js实现
1:左边是正常页面的侧边栏,右边内容用一个iframe代替
2:然后设置setInterval 函数 在指定时间内检测右边iframe的实际高度,再把这个实际高度赋值给iframe的父元素(比如父元素是div元素),这样就能随着主页面的高度 出现滚动条,而不会产生iframe的滚动条,setInterval(你的函数名,间隔时间)来自:求助得到的回答
第3个回答  2012-12-19
整体滚动是何意?
框架是被框架集网页控制的。它将页面分为几个区域,每个区域中超出范围则默认出现滚动条。
如何是你想只要右侧整体上只出现一个滚动条,你可用左右结构的框架集。
其实,还可有其它办法,如使用浮动框架等。
你没给出布局的结构代码,只能这样解释了,希望有帮助。
第4个回答  2017-01-20
利用jQuery+ajax到后台进行逻辑操作 2、将逻辑操作后的结果进行返回 $(function(){ $.ajax({ url : "给出url地址", type : "post", dataType : "json", data
相似回答