加载并全屏轮播加载的其他网站的页面 程序员文章站 2022-10-04 23:39:01 加载并全屏轮播加载的其他网站的页面 一、 设计思路 1、使用iframe标签加载其他网站页面 2、通过js替换iframe的加载链接 3、通过js的定时器实现轮播 4、通过js实现全屏 二、代码小解 1、加载页面 <p>实现iframe的自适应显示。</p> <p>2、通过jquery实现更换链接</p> <p>$('iframe').attr("src", "https://www.taobao.com ")</p> <p>3、设置定时器</p> <p>settimeout是到设定的时间后只执行一次，setinterval是每间隔到设定的时间就会执行。</p> <p>首先先使用settimeout进行第一次的页面轮流加载，再使用setinterval和settimeout相结合实现长期的轮播。</p> <h2>三、 项目代码</h2> <div class="cnblogs_code"> <pre class="brush: html;"><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></pre> </div> <p> </p> </div> <div class="info-pre-next"> <p> 上一篇： <a href="/article/1866786.html"> Linux内核学习笔记（3）-- 进程的创建和终结 </a> </p> <p> 下一篇： <a href="/article/1866788.html"> Sqlserver UrlEncode </a> </p> </div> <div class="wz_tuijian"> <p> 推荐阅读 </p> <ul> <li> <a href="/article/2441801.html" target="_blank" title="获取网站所有网页访问的URL地址和页面资源加载访问地址"> <h2> 获取网站所有网页访问的URL地址和页面资源加载访问地址 </h2> </a> </li> <li> <a href="/article/1866787.html" target="_blank" title="加载并全屏轮播加载的其他网站的页面"> <h2> 加载并全屏轮播加载的其他网站的页面 </h2> </a> </li> <li> <a href="/article/1863595.html" target="_blank" title="Android开发如何加载WebView中的H5页面并全屏视频播放"> <h2> Android开发如何加载WebView中的H5页面并全屏视频播放 </h2> </a> </li> <li> <a href="/article/1836093.html" target="_blank" title="使用Google CDN导致网站页面无法加载的问题解决"> <h2> 使用Google CDN导致网站页面无法加载的问题解决 </h2> </a> </li> <li> <a href="/article/1216747.html" target="_blank" title="获取网站所有网页访问的URL地址和页面资源加载访问地址"> <h2> 获取网站所有网页访问的URL地址和页面资源加载访问地址 </h2> </a> </li> <li> <a href="/article/1054431.html" target="_blank" title="vue 读取本地代码：static目录下的json文件，并加载显示页面上"> <h2> vue 读取本地代码：static目录下的json文件，并加载显示页面上 </h2> </a> </li> <li> <a href="/article/852397.html" target="_blank" title="加载并全屏轮播加载的其他网站的页面"> <h2> 加载并全屏轮播加载的其他网站的页面 </h2> </a> </li> <li> <a href="/article/840913.html" target="_blank" title="使用jquery的load方法设计动态加载，并解决被加载页面JavaScript失效问题"> <h2> 使用jquery的load方法设计动态加载，并解决被加载页面JavaScript失效问题 </h2> </a> </li> <li> <a href="/article/761745.html" target="_blank" title="Android开发如何加载WebView中的H5页面并全屏视频播放"> <h2> Android开发如何加载WebView中的H5页面并全屏视频播放 </h2> </a> </li> <li> <a href="/article/716248.html" target="_blank" title="使用Google CDN导致网站页面无法加载的问题解决"> <h2> 使用Google CDN导致网站页面无法加载的问题解决 </h2> </a> </li> </ul> </div> </article> </div> </main> <footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body> </html>