加载并全屏轮播加载的其他网站的页面
一、 设计思路
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>
原文地址：https://www.cnblogs.com/xshan/p/9573612.html
时间： 2024-10-09 18:04:03