html页面怎样固定头部和底部,中间用iframe标签插入页面

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html页面怎样固定头部和底部,中间用iframe标签插入页面相关的知识,希望对你有一定的参考价值。

很简单的啊。我直接写在页面了哦,class id 属性什么的你自己写了。

<!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>iframe</title>
</head>

<body style="margin:0; padding:0;">
<div style="height:100px;">头部div</div>
<iframe style="height:600px; width:100%">
</iframe>
<div style="height:100px;">底部div</div>

</body>
</html>
参考技术A 可以用frameset啊
<frameset rows="88,*,88" cols="*" >
<frame src="top.html" />
<frame src="midden.html" />
<frame src="buttom.html" />
</frameset>
上下都是88px,中间的自适应,中间的还需要分层的话,可以把中间的<frame src="midden.html" />替换成<frameset cols="88,*" >
row有几个就有几行,cols有几个就有几列
可以参考http://www.w3school.com.cn/tags/tag_frameset.asp
参考技术B 我是弱渣,只是一己之见啊:
固定的话用css:position:fixed
比如<div style="position:fixed;left:0;top:0;width:100%;height:150px;"></div>
中间非要用iframe?这玩意我用的少,
<iframe width=100% height=多少 frameborder=0 src=URL></iframe>
iframe好像是少用得好?iframe的高度自适应没研究过……追问

就像那些网站一样 头和尾都一样 中间可以是点击头部上的超链接再显示 暂时就是用到iframe。是不是要用js?我试着用表格显示三行 中间是iframe然后头尾 但是第三行总是显示不出来。

参考技术C 这个需要用到JS加iframe,这里不能上传文件,你可以搜索后网站台管理模板,有很多

iframe显示微信公众号文章

最近在做一个案例页面,主要结构就是列表和内容,还有固定的头部和底部(方便查看价格及购买),因为之前的案例详情页是很多的固定页面,这样不太方便维护,现在其他同事需要展示不同的案例,所以就从新整理了一下这块:

1、列表页就是很普通的,请求数据,包含一张图片、一句简要说明、一个微信文章链接,图片和文字展示在列表页,链接是当点击图片是跳转(就是div显示隐藏)显示对应的文章;

2、详情页就是将点击的链接赋值给iframe的src,但是这里问题还是比较多的:

  微信公众号文章的图片做了处理,在外域使用的话,图片是显示不出来的,所以在给iframe赋值链接的时候是需要做些处理的,从网上查找资料,使用的是基于jquery的一个方法: 

    $.ajaxPrefilter( function (options) {
    if (options.crossDomain && jQuery.support.cors) {
    var http = (window.location.protocol === ‘http:‘ ? ‘http:‘ : ‘https:‘);
    options.url = http + ‘//cors-anywhere.herokuapp.com/‘ + options.url;
    };
    });
    var showSrc = 微信文章地址

     $.get( showSrc, function (response){
          var html = response;
        html = html.replace(/data-src/g, "src").replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/g, ‘‘).replace(/https/g,‘http‘);

        var html_src = ‘data:text/html;charset=utf-8,‘ + html;

        iframe.attr("src" , html_src);

        //var bodyInner = thisV.getBody(html,REG_BODY);
          //bodyInner = ‘<div class="bodyHtml">‘+bodyInner +‘</div>‘
        //$(‘.casesCon‘).append(bodyInner);
    });


  上面$.ajaxPrefilter函数是指定预先处理ajax参数选项的回调函数,
  在所有参数选项被ajax函数处理之前,可以使用该函数设置的回调函数来预先更改任何参数选项。
  还可以指定数据类型(dataType),从而只预先处理指定数据类型的参数选项。
  该函数可以调用多次,以便为不同数据类型的ajax请求指定不同的回调函数。
  该函数属于全局jQuery对象。
  用法:jQuery.ajaxPrefilter([ dataType ] , handler)
  dataType(string):可用的数据类型为:xml、html、text、json、jsonp、script,一个或多个数据类型,使用空格隔开:"xml json html";
  handler(Function):可有3个参数options、originalOptions、jqXHR;
  具体可查看 http://www.css88.com/jqapi-1.9/jQuery.ajaxPrefilter/
  在我的这个项目里,就是将下面get请求的地址重新处理了一下,在请求地址修改为:http://cors-anywhere.herokuapp.com/微信文章地址,
  http://cors-anywhere.herokuapp.com这个网址是一个处理跨域请求的地址,以我这个项目简单说明一下,就是将我需要的微信文章地址,转换成HTML代码返回,也就是下面get函数中response。
  那么,下面的$.get函数,虽然请求的是微信文章的地址,但实际请求到的是这篇文章的HTML,微信文章的图片地址都是data-src,所以正则替换成src
  下面,需要将这些代码在做一下处理,赋值给iframe的src中,让图片可以在跨域的情况下也能正常显示,就是在我们得到的HTML前面添加 ‘data:type/html;charset=utf-8,‘ 这句话添加到URL前面,浏览器就会将后面的东西当作html代码解析,so~
  实际给iframe的src赋的值是 ‘data:type/html;charset=utf-8,‘ + response,这样浏览器在解析这些代码的时候就避开了跨域问题(具体可能由cors-anywhere),此时,在浏览器中就可以正常显示了。BUT~
  项目需要在微信中使用,当我们在微信中打开这个iframe的时候,很荣幸的死掉了...这个死掉的原因是因为微信中,iframe的src不支持data的写法,可能是微信做了处理吧,那就换个思路吧,苦思冥想~
  既然已经把HTML代码都请求过来了,那我们在微信中就不用iframe,直接把内容和样式append进去,(在这之前,我把js都去掉了,因为存在跨域问题,浏览器老报错。),
  替换以后(就是上面注释的部分)可以用(当然是在上到我们测试环境,然后在微信中打开),大部分图片都可以正常显示,然后向我们领导询问,这个可能还是由一些跨域的问题,正好有一张图片,每篇文章都有,但有的可以显示,有的就不能,经过仔细对比,
  发现图片请求是https的时候,图片显示不出来,http的时候,图片就能显示(但把地址复制到浏览器地址栏,http开头的请求就会变成https了,这块不是很懂,希望有看到的朋友,如果懂的话,留言讲解一下,感谢~),
  用这种方法在浏览器中查看,就会显示微信那个默认图片,显示不正常,所以就判断在浏览器的时候,就用iframe,在微信中就用appendDOM节点的方式,到此,在微信中、浏览器中均能正常显示。又要BUT了~
  我们需要在app中也要打开,使用iframe的方式,挂掉了,使用append的方式,可以显示,但图片又变成了微信默认图...
  有遇到相似问题的同学,欢迎留言评论~


































以上是关于html页面怎样固定头部和底部,中间用iframe标签插入页面的主要内容,如果未能解决你的问题,请参考以下文章

html页面点击各个a标签超链接怎样固定头部和底部

html里怎样公用头部

jquery-mobile.js这个做手机页面,怎么只让他中间组件可以上下拉动,而头部和底部组件,不动,一直显示

将多个html页面里引进相同的一个头部页面,应该怎么做

html页面有两个上下排列的div,头部div的高度为固定的,底部div的高度是随着浏览器窗口高度改变而改变。

html能否实现手机端左右滑动切换不同的页面