本文由 资源共享网 – zgwxw 发布,转载请注明出处,如有问题请联系我们!纯js实现iframe自适应宽度高度前端源码
资源语言: 中文
图片展示资源(纯js实现iframe自适应宽度高度前端源码)网址:https://www.08i8.com/ttqdzy/detail18403.html;转载请注明!
前面写了一个需要依赖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自适应宽度高度前端源码)网址:https://www.08i8.com/ttqdzy/detail18403.html;转载请注明!
与《纯js实现iframe自适应宽度高度前端源码》相关的《插件》
jQuery自适应浏览器图片切换代码
jQuery自适应浏览器图片切换是一款全屏banner图片滚动切换特效。文章来自陌佑网www.zjw13.xyz转载请保留本链接,谢谢!
2 94666 0
HTML5响应式自适应宽度幻灯片特效
这是一款可以根据屏幕宽度自动调整幻灯片宽度的HTML5响应式自适应宽度网站banner焦点图幻灯片代码特效,全屏banner幻灯片宽度始终占据整个视口的宽度,演示网页有两个效果。文章来自陌佑网www.zjw13.xyz转载请保留本链接,谢谢!
3 95251 0
Swiper全屏自适应焦点图轮播代码
这是一款基于Swiper实现的全屏自适应焦点图轮播代码,点击箭头按钮或拖动图片左右滚动切换到中间展示大图。 js代码 window.onload = function() { var swiper = new Swiper(".swiper-container",{ autoplay: false, speed: 1000, ...
2 95514 0