加載並全屏輪播加載的其他網站的頁面
阿新 • • 發佈：2018-09-02
msr can https scrip 退出 lse explore exp btn
加載並全屏輪播加載的其他網站的頁面
一、 設計思路
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>
加載並全屏輪播加載的其他網站的頁面