xml地图|网站地图|网站标签 [设为首页] [加入收藏]

正规赌博十大app排名

当前位置:网上十大正规赌博平台 > 正规赌博十大app排名 > 基于JS判断iframe是否加载成功的方法,就这么简单

基于JS判断iframe是否加载成功的方法,就这么简单

来源:http://www.nb-machinery.com 作者:网上十大正规赌博平台 时间:2019-07-10 21:40

在各种Web开发过程中,对话框和提示框的处理是很常见的一种界面处理技术,用得好,可以给用户很好的页面体验,Bootstrap开发也一样,我们往往在页面新增、编辑、查看详细等界面使用弹出对话框层的方式进行显示数据,删除则可能使用一个提示确认框,如果操作成功,我们可以使用更丰富的提示框来处理,本篇主要对比说明在Bootstrap开发中用到的这些技术要点。

最近发现一个叫 Bootstrap 的好东西,Bootstrap 是现在最流行的响应式 CSS 框架,它以移动设备优先,能够快速适应不同设备。使用它编写响应式页面快捷、方便,而且屏蔽了浏览器差异。使用了 Bootstrap 后,再也无法想象过去使用原始的 CSS 编写网页的悲惨生活了。

推荐阅读:

1、Bootstrap对话框的使用

经过学习,我发现自己也具备了分分钟开发出一个高大上的页面的能力。本文将会为大家介绍 Bootstrap,并且带领大家一起实现一个响应式页面。
图 1. 移动优先,适应不同设备

JS iFrame加载慢怎么解决

常规的Bootstrap有几种尺寸的对话框,包括默认状态的小对话框,中等宽度的对话框,和全尺寸的对话框几种,Bootstrap的对话框界面非常友好, 当我们使用ESC键或者鼠标单击其他空白处,则会自动隐藏对话框的。

图片 1

在项目中经常要动态添加iframe,然后再对添加的iframe进行相关操作,而往往iframe还没添加完呢,后边的代码就已经执行完了,所以有些你写的东西根本没有显示出来。这时,我们就要考虑是否可以等iframe加载完后再执行后边的操作,当然,各种浏览器早就为我们考虑到啦,看下面:

它们的定义只是class不同,如下面是默认的小对话框界面代码:

一、安装 最简单的方式是直接在网页中引用内容分发网络(CDN)提供的 Bootstrap,当用户访问网页时,会从就近的服务器上获取资源。

ie浏览器

<!--------------------------添加/修改信息的弹出层---------------------------->
<div id="add" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header bg-primary">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
        <h4 class="modal-title">
          <i class="icon-pencil"></i>
          添加信息
        </h4>
      </div>
      <form class="form-horizontal form-bordered form-row-strippe" id="ffAdd" action="" data-toggle="validator" enctype="multipart/form-data">
        <div class="modal-body">
          <div class="row">
            <div class="col-md-12">
              <div class="form-group">
                <label class="control-label col-md-2">父ID</label>
                <div class="col-md-10">
                  <select id="PID" name="PID" type="text" class="form-control select2" placeholder="父ID..." ></select>
                </div>
              </div>
            </div>
            <div class="col-md-12">
              <div class="form-group">
                <label class="control-label col-md-2">名称</label>
                <div class="col-md-10">
                  <input id="Name" name="Name" type="text" class="form-control" placeholder="名称..." />
                </div>
              </div>
            </div>
            <div class="col-md-12">
              <div class="form-group">
                <label class="control-label col-md-2">备注</label>
                <div class="col-md-10">
                  <textarea id="Note" name="Note" class="form-control" placeholder="备注..."></textarea>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer bg-info">
          <input type="hidden" id="ID" name="ID" />
          <button type="submit" class="btn blue">确定</button>
          <button type="button" class="btn green" data-dismiss="modal">取消</button>
        </div>
      </form>
    </div>
  </div>
</div>

清单 1. 从内容分发网络上获取 Bootstrap

IE的每个elem节点都会拥有一个onreadystatechange事件,这个事件每次在elem内容发送变化的时候触发,比如内容正在载入loading会触发,内容载入完毕loaded会触发,内容载入成功complete会触发,这个函数还需要配合readyState,这是ie上每个elem都拥有的属性,用来查看每次触发时候的状态。

大概的界面如下所示:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="bootstrap/3.3.4/css/bootstrap.min.css
">

<!-- Optional theme -->
<link rel="stylesheet" href="bootstrap/3.3.4/css/bootstrap-theme.min.css
">

<!-- Latest compiled and minified JavaScript -->
<script src="bootstrap/3.3.4/js/bootstrap.min.js">
</script>
//先为iframe 添加一个 onreadystatechange
iframe.attachEvent("onreadystatechange", function(){
//此事件在内容没有被载入时候也会被触发,所以我们要判断状态
//有时候会比较怪异 readyState状态会跳过 complete 所以我们loaded状态也要判断
if(iframe.readyState === "complete" || iframe.readyState == "loaded"){
//代码能执行到这里说明已经载入成功完毕了
//要清除掉事件
iframe.detachEvent( "onreadystatechange", arguments.callee);
//这里是回调函数
}
});

图片 2

还可以选择下载 Bootstrap 在本地部署。用户可以下载页面下载完整的 Bootstrap,也可以在定制页面根据项目需要,选择项目用到的功能,编译并下载一个简化版的 Bootstrap。下载完成后得到一个 zip 文件,解压后的目录结构如下所示:

其他浏览器(Firefox,Opera,chrome等 )

注意上面代码里面的对话框样式代码,如下:

清单 2. Bootstrap 目录结构

在其他非IE的浏览器上 Firefox,Opera,chrome等 iframe 都会拥有一个 onload 事件,此事件只要触发就说名内容已经加载完毕。

<div class="modal-dialog">

bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2

iframe.addEventListener( "load", function(){
//代码能执行到这里说明已经载入成功完毕了
this.removeEventListener( "load", arguments.call, false);
//这里是回调函数
}, false);

如果是其他两个尺寸的数据库,也只需要修改这里即可,如下所示两种代码分别是:

这里我们主要关注三个简化后的文件:bootstrap.min.css 是 Bootstrap 的主要组成部分,包含了大量要用到的 CSS 类;bootstrap-theme.min.css 包含了可选的 Bootstrap 主题;bootstrap.min.js 提供了一些 JavaScript 方法,需要注意的是 Bootstrap 依赖于 jQuery,因此使用 bootstrap.min.js 前必须引入 jQuery。和使用内容分发网络一样,我们使用相对路径在自己的页面中引入相应的 CSS 和 JavaScript。在实际开发中,我们常常使用 Bootstrap 提供的模板作为起点,该模板引入了响应式页面需要的元数据和 Bootstrap,开发者可在此基础之上编写自己的响应式页面:

综合一下

<div class="modal-dialog modal-lg">

清单 3. Bootstrap 基础模板

if(iframe.attachEvent){
iframe.attachEvent("onreadystatechange", function() {
//此事件在内容没有被载入时候也会被触发,所以我们要判断状态
//有时候会比较怪异 readyState状态会跳过 complete 所以我们loaded状态也要判断
if (iframe.readyState === "complete" || iframe.readyState == "loaded") {
//代码能执行到这里说明已经载入成功完毕了
//要清除掉事件
iframe.detachEvent("onreadystatechange", arguments.callee);
//这里是回调函数
}
});
}else{
iframe.addEventListener("load", function() {
//代码能执行到这里说明已经载入成功完毕了
this.removeEventListener("load", arguments.call, false);
//这里是回调函数
}, false);
}

以及

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other
 head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>

<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="http://www.nb-machinery.com/uploads/allimg/190710/21401951Y-2.jpg"></script>
<script src="http://www.nb-machinery.com/uploads/allimg/190710/2140195615-3.jpg"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://www.nb-machinery.com/uploads/allimg/190710/2140192K0-4.jpg"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

注意:上面的函数必须放在 iframe 被appendChild到body后,否则不会被触发

<div class="modal-dialog modal-full">

二、CSS
Bootstrap 首先是一个 CSS 框架,它预定义了很多 CSS 类,开发者只需要为 HTML 元素添加适当的 CSS 类,就能得到想要的样式,可以完成页面的布局、排版等功能。Bootstrap 提供的 CSS 功能异常强大,本文将重点放在其提供的网格系统上,对于其他功能,只在应用时顺便提及。您若想了解更多功能,可参考官方文档。
容器 使用 Bootstrap 布局时,需要将 HTML 元素包含在一个容器(.container)里,Bootstrap 提供了两种容器:.container 和 .container-fluid。前者将内容固定宽度居中显示,后者让内容横向撑满整个浏览器窗口,如下所示:

以上内容是小编给大家介绍的JS判断iframe是否加载成功的方法,希望对大家有所帮助!

我们可以根据界面元素的布局,来决定采用哪个尺寸的对话框层定义,不过他们这几个对话框的调用方式是一致的。

清单 4. .container 和 .container-fluid

您可能感兴趣的文章:

  • js实现网页防止被iframe框架嵌套及几种location.href的区别
  • js判断iframe中元素是否存在的实现代码
  • JS判断iframe是否加载完成的方法
  • js判断iframe内的网页是否滚动到底部触发事件
  • js下判断 iframe 是否加载完成的完美方法
  • js如何判断是否在iframe中及防止网页被别站用iframe嵌套

打开对话框界面如下所示:

<div class="container">
<p>“小时候每当我生病,母亲都会为我冲一杯咖啡,她温柔地说:“外国人都喝这个的。
”幼小的我总害怕咖啡,酸甜苦涩交错。如今我走遍米萝、上岛、星巴克都找不到小时候喝的那个味道,
直到那天我喝了一杯板蓝根。” </p>
</div>

<div class="container-fluid">
<p>“小时候每当我生病,母亲都会为我冲一杯咖啡,她温柔地说:“外国人都喝这个的。”
幼小的我总害怕咖啡,酸甜苦涩交错。如今我走遍米萝、上岛、星巴克都找不到小时候喝的那个味道,
直到那天我喝了一杯板蓝根。” </p>
</div>
//显示可以选择客户
$("#btnSelectCustomer").show();

下图是显示在浏览器中的样子:

关闭对话框界面如下所示:

图 2. 容器

$("#add").modal("hide");

图片 3

一般情况下,我们弹出的对话框就是一个表单,可以执行类似保存数据的提交操作的,因此需要对表单的数据进行验证,如果有错误,我们可能需要在界面上提醒,因此在页面初始化的时候,需要初始化表单的验证规则,下面是我们常规的表单初始化操作。

网格系统
和我们在《编写第一个响应式页面》中设计的网格系统一样,Bootstrap 也将页面分为行(.row),每行 12 列(.col-md-*)。行必须包含在容器里,根据屏幕大小不同,列又分为.col-xs-、.col-sm-、.col-md-、.col-lg-,分别对应手机(<768px)、平板(≥768px)、中等屏幕电脑(≥992px)和大屏幕电脑(≥1200px)。其中出现的这些像素称为临界点,每当浏览器大小或屏幕尺寸从一个临界点到达另一个临界点时,相应的 CSS 类就会起作用,页面布局就会发生变化。详见下图:

//绑定相关事件
    function BindEvent() {
      //判断表单的信息是否通过验证
      $("#ffAdd").validate({
        meta: "validate",
        errorElement: 'span',
        errorClass: 'help-block help-block-error',
        focusInvalid: false,
        highlight: function (element) {
          $(element).closest('.form-group').addClass('has-error');
        },
        success: function (label) {
          label.closest('.form-group').removeClass('has-error');
          label.remove();
        },
        errorPlacement: function (error, element) {
          element.parent('div').append(error);
        },
        submitHandler: function (form) {
          $("#add").modal("hide");
          //构造参数发送给后台
          var postData = $("#ffAdd").serializeArray();
          $.post(url, postData, function (json) {
            var data = $.parseJSON(json);
            if (data.Success) {
              //增加肖像的上传处理
              $('#file-Portrait').fileinput('upload');
              //保存成功 1.关闭弹出层,2.刷新表格数据
              showTips("保存成功");
              Refresh();
            }
            else {
              showError("保存失败:"   data.ErrorMessage, 3000);
            }
          }).error(function () {
            showTips("您未被授权使用该功能,请联系管理员进行处理。");
          });
        }
      });
    }

图 3.**网格系统
**

但是一般这些代码都会重复很多,因此我们可以封装函数的方式,重用部分代码,从而使用更简洁的处理代码,但同样能达到目的。

图片 4

 //绑定相关事件
    function BindEvent() {
      //添加、编辑记录的窗体处理
      formValidate("ffAdd", function (form) {
        $("#add").modal("hide");
        //构造参数发送给后台
        var postData = $("#ffAdd").serializeArray();
        $.post(url, postData, function (json) {
          var data = $.parseJSON(json);
          if (data.Success) {
            //保存成功 1.关闭弹出层,2.刷新表格数据
            showTips("保存成功");
            Refresh();
          }
          else {
            showError("保存失败:"   data.ErrorMessage, 3000);
          }
        }).error(function () {
          showTips("您未被授权使用该功能,请联系管理员进行处理。");
        });
      });
    } 

怎么理解上面这个表格呢?假如在电脑上浏览页面,需要将页面分为三列,分别占行宽的 1/4、2/4、1/4,则可编写代码如下:

2、删除确认的对话框处理

清单 5. 一行分三列

1)bootbox插件的使用

<div class="row">
<div class="col-md-3">.col-md-3</div>
<div class="col-md-6">.col-md-6</div>
<div class="col-md-3">.col-md-3</div>
</div>

除了上面的常规对话框,我们还经常碰到一种简洁的确认对话框,虽然也可以使用上面的代码来构建一个确认对话框,不过一般情况下不需要这么麻烦的,可以使用插件bootbox的确认对话框来进行处理。

打开浏览器,可以看到它们各自占据了 12 列中的 3、6、3 列,加起来恰好是 12 列。如果我们缩小浏览器窗口,直到其小于 970px,此时会发现变成了三行,堆在一起显示。除过.col-xs-,其他 CSS 类的行为都一样,在屏幕尺寸小于其临界点时,会堆起来显示,只有在屏幕尺寸大于其临界点时,才按列显示,而.col-xs- 在任何情况下都按列显示。
对应不同屏幕尺寸的 CSS 类可以混合使用,比如我想让一个页面在电脑上显示 3 列,在手机上显示成 2 列,则可编写代码如下,在手机上,第三列会换行到下一行显示,并且占据行宽的一半:
清单 6. 在电脑和手机上显示不同数量的列

Bootbox.js是一个小的JavaScript库,它帮助您在使用bootstrap框架的时候快速的创建一个对话框,也可以帮您创建,管理或删除任何所需的DOM元素或js事件处理程序。

<div class="row">
<div class="col-xs-6 col-md-3">.col-md-3</div>
<div class="col-xs-6 col-md-6">.col-md-6</div>
<div class="col-xs-6 col-md-3">.col-md-3</div>
</div>

bootbox.js使用三方法设计模仿他们的本地JavaScript一些方法。他们确切的方法签名是灵活的每个可以采取各种参数定制标签和指定缺省值,但它们通常被称为一样:

如果希望在所有设备上显示相同的列,只需要定义最小尺寸的.col-xs- 即可,布局会自动扩展到更大尺寸,反之则不成立:
清单 7. 所有设备上显示同数量的列

本文由网上十大正规赌博平台发布于正规赌博十大app排名,转载请注明出处:基于JS判断iframe是否加载成功的方法,就这么简单

关键词: EVO视讯直播