本文由 资源共享网 – zgwxw 发布，转载请注明出处，如有问题请联系我们！纯js实现iframe自适应宽度高度前端源码
资源语言： 中文
前面写了一个需要依赖jquery，用的代码不多，感觉太占资源！
所以用纯js重新写了一遍，也没改多少代码！
实现功能：
1、静态页接收url变量
2、动态添加iframe标签
3、自适应iframe网页高度和宽度
不用下载，复制过去就可以用！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title></title>
</head>
<body>
<style>*{padding:0px;margin:0px;border:0px;}</style>
<div id="iframe-box"></div>
<script>
document.body.parentNode.style.overflowY = "hidden";
var url = window.location.href;
if_url = geturl("url",url);
if_url="http://www.08i8.com";
let iframe = document.createElement('iframe');
iframe.src = if_url;
iframe.height = window.outerHeight;//document.body.scrollHeight;window.screen.availHeight;window.screen.height;
iframe.width = document.body.offsetWidth; //'100%';
iframe.id = 'doc_iframe';
document.getElementById('iframe-box')?.appendChild(iframe);//向指定dom插入iframe
function geturl(keys, url) {
var new_reg = new RegExp('(^|[&?])' + keys + '=([^&]*)(&|$)');
var new_index = url.indexOf('?');
var new_str = url.substring(new_index, url.length);
var new_r = new_str.match(new_reg);
if (new_r != null) return unescape(new_r[2]);
return '';
}
</script>
</body>
</html>
与《纯js实现iframe自适应宽度高度前端源码》相关的《插件》
jquery.flexslider左右自适应宽度切换焦点图
效果描述： 适合移动端，或者多终端自适应的焦点图代码 它能够主动监测浏览器宽度，然后自动调节自己的宽度 使用方法： 1、将head中的样式引入到你的网页中 2、将body里的代码部分拷贝到你需要的地方即可 (注意保持js、图片路径正确即可)文章来自陌佑网www.zjw13.xyz转载请注明出处，谢谢!!!
3 161045 0
jQuery.jquery-finger—左右自适应全屏幻灯片切换
这是从国外网站看到的一个左右全屏幻灯片切换效果插件，切换按钮处于中底部 默认左右切换箭头处于隐藏状态，当鼠标悬停后才会显示 缺点是：调用js较多，比较繁杂文章来自陌佑网www.zjw13.xyz转载请注明出处，谢谢!!!
2 161631 0
jQuery自适应窗口大小图片轮播特效
jQuery自适应窗口大小图片轮播特效是一款可以根据视口的大小百分比来动态修改焦点图图片轮播切换的尺寸。文章来自陌佑网www.zjw13.xyz转载请保留本链接，谢谢!
2 160410 0
