javascript iframe 完毕无刷新载入整页的代码上海时

加载并全屏轮播加载的其余网址的页面

loadPage的概念如下:

二、代码小解

1、加载页面

        <iframe src="" width='100%' height='100%' frameborder='0' name="_blank" id="_blank"></iframe>

完结iframe的自适应展现。

2、通过jQuery完毕转移链接

$('iframe').attr("src", " ")

3、设置停车计时器

setTimeout是到设定的岁月后只进行二次,setInterval是每隔到设定的小时就能推行。

第一先接纳set提姆eout举办第二回的页面轮流加载,再利用setInterval和setTimeout相结合贯彻深入的轮播。

是因为do.html会被缓存,所以在do.js中用ajax将重临的html输出到do.html
在线演示地址

一、  设计思路

1、使用iframe标签加载别的网址页面

2、通过js替换iframe的加载链接

3、通过js的机械漏刻达成轮播

4、通过js完毕全屏

复制代码 代码如下:

三、  项目代码

<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>

 

if(!typeof(window.j))window.j=new js();
j.plus=new plus();
function plus(){}
plus.prototype.loadPage=function(r,callback,e,times){
/*
r 央求; r.time : 等待加载时间(纳秒);
callback :回执函数 (callback.start(),callback.over())
e.element 页面容器; */
if(!r.uri)alert('page uri parameters not be found!');
var aj=new ajax();
aj.request(r,{
start:function(){if(callback.start)callback.start();if(e)e.innerHTML='加载中..';else{document.body.innerHTML='加载中';}},
error:function(x){if(e)e.innerHTML='加载失利!';else document.body.innerHTML='加载失利';},
success:function(x){
var func=function(){if(callback.over)callback.over();if(e)e.innerHTML=x;else document.write(x);};
if(r.time){var t=new timer(r.time,func);t.start();}/*推迟展现*/
else func();
}});
}
/*aj为ajax央浼对象在global.js中定义
* timer为落到实处二个沙漏的代码,在plus.js中有定义 */

document.write("<script src="/image/script.ashx/global.js?ver=1.0.0"></script>");
document.write("<script src="/image/script.ashx/plus.js?ver=1.0.0"></script>");
window.onload=function(){
j.plus.loadPage({uri:"/",time:1},{
start:function(){/*发端加载的回执函数*/},
over:function(){/*加载成功的回执函数*/}});
}

var bd=j.$("mainbody"); // mainbody为一个div容器
var uri="/do.html?uri=/management.aspx/" uri;
bd.innerHTML="<iframe src='" uri "' frameborder='0' width='" (j.x()-200) "' height='100%' scrolling='no'></iframe>";

do.html的源代码为:

, 用iframe也足以实现,但绝非上述做法完美...

复制代码 代码如下:

<script type="text/javascript" src="/image/script.ashx/global.js?ver=1.0.0"></script>
<script type="text/javascript" src="/image/script.ashx/plus.js?ver=1.0.0"></script>

jquery有三个load()方法,使用格局如:$("#div").load("/index.html");那样就足以将index.html加载到ID为div的容器中,
用iframe也足以兑现,但尚未上述做法完美,参见discuz这一个网址,如登录弹出贰个层,也是载入的一个页面,但本人意识事态栏左侧出现的是 正在展开about:blank,不知情是还是不是将iframe的src设为about:blank,然后在编辑iframe呢?但注意了,查看源代码的时候却看不到载入页面包车型地铁时候是看不到载入的那几个页面包车型客车源代码,不驾驭是或不是才用了跟jquery同样分析head,然后将载入页面包车型地铁头顶音讯增多到主页面包车型地铁头顶,然后用eval()函数实践javascript代码,,求解?
以下笔者用了一个页面做为承载载入页面源代码的容器,命名称为do.html,传递三个参数uri告诉do.html要载入的页面!
示例DEMO: 间接点登入既可
该页面加载了多个js文件

函数已经定义完毕,我们在要求加载的地方增添代码:
javascript iframe 完毕无刷新载入整页的代码上海时时乐走势图官网。File:/management.aspx/

File:do.js

复制代码 代码如下:

<html>
<head>
javascript iframe 完毕无刷新载入整页的代码上海时时乐走势图官网。<title>载入中...</title>
<script type="text/javascript" src="/image/script.ashx/do.js?ver=1.0"></script>
</head>
<body>
</body>
</html>

复制代码 代码如下:

复制代码 代码如下:

本文由上海时时乐走势图发布于web前端,转载请注明出处:javascript iframe 完毕无刷新载入整页的代码上海时

您可能还会对下面的文章感兴趣: