当前位置： 移动技术网 > IT编程>网页制作>Html5 > 加载并全屏轮播加载的其他网站的页面

加载并全屏轮播加载的其他网站的页面

2018年09月03日  | 移动技术网IT编程  | 我要评论

加载并全屏轮播加载的其他网站的页面

一、  设计思路

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>

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网