也是载入的一个页面,2、通过js替换iframe的加载

作者: 前端  发布:2019-11-22

三、  项目代码

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

 

复制代码 代码如下:

定时器:

二、代码小解

1、加载页面

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

实现iframe的自适应显示。

2、通过jQuery实现更换链接

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

3、设置定时器

setTimeout是到设定的时间后只执行一次,setInterval是每间隔到设定的时间就会执行。

首先先使用setTimeout进行第一次的页面轮流加载,再使用setInterval和setTimeout相结合实现长期的轮播。

复制代码 代码如下:

clearTimeout(对象) 清除已设置的setTimeout对象
clearInterval(对象) 清除已设置的setInterval对象

一、  设计思路

1、使用iframe标签加载其他网站页面

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

3、通过js的定时器实现轮播

4、通过js实现全屏

复制代码 代码如下:

setTimeout(aa(),1000) //单位毫秒
function aa()
{
location.href('地址');
}

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

复制代码 代码如下:

要实现的就像百度上面那个发起即时消息的那个地方提示多少条消息。我的java查询条数的方法有了。怎么写js呢?

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

复制代码 代码如下:

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中有定义 */

var clear = function(){
clearInterval(timer);
}
});

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

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.
setInterval("function",time) 设置一个超时对象

do.html的源代码为:

用以指定在一段特定的时间后执行某段程序。

loadPage的定义如下:

$(function(){
var handler = function(){

由于do.html会被缓存,所以在do.js中用ajax将返回的html输出到do.html
在线演示地址

SetInterval为自动重复,setTimeout不会重复。

复制代码 代码如下:

复制代码 代码如下:

File:do.js

}
var timer = setInterval( handler , 1000);

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间,再进行某项操作。
setTimeout("function",time) 设置一个超时对象

<html>
<head>
<title>载入中...</title>
<script type="text/javascript" src="/image/script.ashx/do.js?ver=1.0"></script>
</head>
<body>
</body>
</html>

您可能感兴趣的文章:

  • js定时器(执行一次、重复执行)
  • js定时器的使用(实例讲解)
  • JavaScript定时器详解及实例
  • Javascript/Jquery——简单定时器的多种实现方法
  • 获取焦点时,利用js定时器设定时间执行动作
  • JavaScript暂停和继续定时器的实现方法
  • node.js中的定时器nextTick()和setImmediate()区别分析
  • javascript中SetInterval与setTimeout的定时器用法
  • Javascript 定时器调用传递参数的方法
  • JavaScript定时器setTimeout()和setInterval()详解

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(){/*加载完成的回执函数*/}});
}

JS中定时执行,setTimeout和setInterval的区别,以及l解除方法

, 用iframe也可以实现,但没有上述做法完美...

我要在定时里面加一个页面跳转,然后在页面load的时候加载定时器。怎么写呢?

函数已经定义完成,我们在需要加载的地方添加代码:
File:/management.aspx/

本文由9159.com发布于前端,转载请注明出处:也是载入的一个页面,2、通过js替换iframe的加载

关键词:

上一篇:没有了
下一篇:没有了