加载并全屏轮播加载的其他网站的页面
一、 设计思路
1、使用iframe标签加载其他网站页面
2、通过js替换iframe的加载链接
3、通过js的定时器实现轮播
4、通过js实现全屏
二、代码小解
1、加载页面
<iframe src="https://www.baidu.com" width='100%' height='100%' frameborder='0' name="_blank" id="_blank"></iframe>
实现iframe的自适应显示。
2、通过jQuery实现更换链接
$('iframe').attr("src", "https://www.taobao.com ")
3、设置定时器
setTimeout是到设定的时间后只执行一次，setInterval是每间隔到设定的时间就会执行。
首先先使用setTimeout进行第一次的页面轮流加载，再使用setInterval和setTimeout相结合实现长期的轮播。
三、 项目代码
<html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script src="/static/js/jquery-3.3.1.min.js"></script> <script src="/static/jquery-3.3.1.min.js"></script> <style> body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; overflow: hidden; } </style> <body> <div> <button id="btn">全屏展示</button> <div id="content"> <iframe src="https://www.taobao.com" width='100%' height='100%' frameborder='0' name="_blank" id="_blank"></iframe> </div> </div> </body> //全屏代码 <script language="JavaScript"> document.getElementById("btn").onclick = function () { var elem = document.getElementById("_blank"); var h1 = document.getElementById("h1"); requestFullScreen(elem);// 某个页面元素 //requestFullScreen(document.documentElement);// 整个网页 }; function requestFullScreen(element) { // 判断各种浏览器，找到正确的方法 var requestMethod = element.requestFullScreen || //W3C element.webkitRequestFullScreen || //Chrome等 element.mozRequestFullScreen || //FireFox element.msRequestFullScreen; //IE11 if (requestMethod) { requestMethod.call(element); } else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer var wscript = new ActiveXObject("WScript.Shell"); if (wscript !== null) { wscript.SendKeys("{F11}"); } } } //退出全屏 判断浏览器种类 function exitFull() { // 判断各种浏览器，找到正确的方法 var exitMethod = document.exitFullscreen || //W3C document.mozCancelFullScreen || //Chrome等 document.webkitExitFullscreen || //FireFox document.webkitExitFullscreen; //IE11 if (exitMethod) { exitMethod.call(document); } else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer var wscript = new ActiveXObject("WScript.Shell"); if (wscript !== null) { wscript.SendKeys("{F11}"); } } } </script> <script> $(document).ready(function () { setTimeout(function f() { $('iframe').attr("src", "https://www.baidu.com") }, 30000); setTimeout(function ff() { $('iframe').attr("src", " https://www.taobao.com ") }, 60000); } setInterval(function ffff() { setTimeout(function f() { $('iframe').attr("src", " https://www.baidu.com ") }, 30000); setTimeout(function ff() { $('iframe').attr("src", " https://www.taobao.com ") }, 60000); }, 90000);} </script> </html>