iframe设置高度为100%
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style>
* {
padding: 0;
margin: 0;
} html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
</head> <body>
<iframe id="ajk" width="100%" height="100%" src="http://dulijingjiren18.anjuke.com/gongsi-jjr-3435066/com161133/#afilters" frameborder="0"></iframe>
<script>
var ajk = document.querySelector('#ajk');
var screenHeight, scrillWidth; window.onresize = function() {
screenHeight = document.body.clientHeight;
scrillWidth = document.body.clientWidth;
ajk.height = screenHeight;
if (scrillWidth <= 768) {
ajk.src = "https://m.anjuke.com/hz/jjr-3435066/com161133/"
} else {
ajk.src = "http://dulijingjiren18.anjuke.com/gongsi-jjr-3435066/com161133/#afilters"
}
}
</script>
</body> </html>
当屏幕为手机屏幕时切换url,pc端时让网页100%显示
iframe设置高度为100%的更多相关文章
- js实现iframe自适应高度
转自:http://www.jb51.net/article/15780.htm 对于自适应高度的代码有很多,可效率什么的考虑进来好代码就不多见了,不过思路倒是差不多的! 不带边框的iframe因为能 ...
- iframe自适应高度的多种方法小结
转自:http://www.jb51.net/article/15780.htm 不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的大小 ...
- iframe自适应高度的多种方法方法小结
对于自适应高度的代码有很多,可效率什么的考虑进来好代码就不多见了,不过思路倒是差不多的 不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 ifram ...
- iframe自适应高度的多种方法方法小结(转)
对于自适应高度的代码有很多,可效率什么的考虑进来好代码就不多见了,不过思路倒是差不多的不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的 ...
- 使用事件捕获实时捕获img是否加载完毕, 实现iframe内容高度自动适应
如何判断在html中图片加载完毕呢? 给img图片加onload事件呗. 如何判断一个界面中所有的图片加载完毕呢? 给所有的图片加上onload事件呗. 如果有1000张图片那要怎么绑定事件呢? 我们 ...
- 关于Div的宽度与高度的100%设定
http://www.cnblogs.com/clare-zhang/archive/2011/08/26/2154220.html 正像你所知道的那样,设置DIV大小的有两个属性width和heig ...
- Div的宽度与高度的100%设定
div的100%是从其上一级div的宽高继承来的,所以必须设置其上一级div的宽度或高度,否则无效. 举例说明:父div(deman)宽300高200,子div(cc)如果在这个条件下设置divcc的 ...
- 关于div宽度和高度的100%设定
设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明白这个100%的宽度(高度)到底有多宽有多高?这个100%是从哪里得到的从哪里继承 ...
- 给body设置高度
今天做一个小demo,需要给body设置高度为100%,然鹅发现只设置body的height不可行,需,html,body{height:100%;}为何呢?一个容器的height是从上一级继承而来的 ...
随机推荐
- jquery 异步处理
<!DOCTYPE html> <head> <script type="text/javascript" src="jquery-1.12 ...
- mongo 记得开启验证 auth = true
dbpath=/mnt/mongodb/data/logpath=/usr/local/mongodb/log/mongodb.logauth = trueport=27017logappend=1f ...
- placeholder兼容IE8解决方案
1.原因:placeholder是h5的新属性,IE10以前的浏览器(8.9)不支持此属性. 2.解决方法:jQuery三方插件 jquery-placeholder 3.快速开始: <! ...
- 自然语言交流系统 phxnet团队 创新实训 个人博客 (六)
讯飞的语音sdk是需要申请的,地址是:http://dev.voicecloud.cn/developer.php?vt=1 .申请一个讯飞的开发者账号,然后申请一个appid,申请的时候需要填写开发 ...
- linux中怎么查看ip地址
命令 ifconfig 可以查看当前主机的ip地址: 如果要手动更改ip地址. 可以输入命令cd /etc/sysconfig/network 在这个目录下会有 类似于ifcfg-@@的文件. 可以用 ...
- Ubuntu 安装软件方法
Ubuntu软件安装有几种方式,常用的是deb包的安装方式,deb是debian系列的Linux包管理方式,Ubuntu软件安装属于debian的派生,也默认支持这种软件安装方式,当下载到一个deb格 ...
- clapack在android上移植
参考 https://www.cnblogs.com/hrlnw/p/4128217.html 如何在android上进行android库编译 https://blog.csdn.net/h3c4le ...
- mysql 5.7.10 启动多实例笔记
1. 复制配置文件 cp /etc/my.cnf /etc/my3308.cnf 2. 修改配置文件 3. 创建目录, 并赋予权限 4. 初始化数据库 ---> 有报错 2018-01-03T0 ...
- WebService系列一:WebService简介
原文链接:http://www.cnblogs.com/xdp-gacl/p/4259109.html 一.WebService是什么 WebService是一种跨编程语言和跨操作系统平台的远程调用技 ...
- ubuntu -- 安装最新版的nodejs
1.安装最新的nodejs和npm # apt-get update # apt-get install -y python-software-properties software-properti ...