清除iframe onload重新触发

2024-08-23

iframe之onload事件小记

项目上做了一个具有wizard(向导)功能的菜单导航页面,子页面的引入通过主页面上iframe的src属性切换实现.为了有个良好的交互体验,每次更新iframe的src时,主页面上都显示一个模态的loading效果,等iframe指定的页面加载完后,再通过iframe的onload回调来隐藏loading效果. 常规的代码如下: 点击菜单项时,调用setUrl传入需要载入的子页面url,显示loading效果,页面加载完毕,隐藏loading效果.看起来好像没有什么问题. 由于该项目浏览器兼容性

iframe onload事件触发两次

标准参考关于 HTML 4.01 规范中 onload 内在事件说明:http://www.w3.org/TR/html401/interact/scripts.html#adef-onload 关于 DOM Level2 Events 规范中 load 事件说明:http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-htmlevents 问题描述插入空白页面 IFRAME 元素时 Chrome S

js iframe onload &line-height浏览器兼容问题

1.IE iframe onload事件在IE下给iframe添加onload事件经常无效,因为在IE下它最多只能被激活一次,而且无论你有多少个iframe,被激活的也只能是最后一个的.可以用下面的方法加载,保险起见可在定义iframe 时添加onload事件. function AddOnloadEvent(){ var frame = document.getElementById('iframe'); if (iframe.attachEvent){ frame.attachEvent(

在iframe内页触发顶层页面body的blur事件

//在iframe内页触发顶层页面body的blur事件. if (window != top) { $(document.body).click(function () { $(top.document.body).click(); }); }

解决Chrome Safari Opera环境下动态创建iframe onload事件同步执行

我们先看下面的代码: setTimeout(function(){ alert(count); },2000); var count = []; document.body.appendChild(createEditorBody()); function oninitialized(){ count.push(2); } count.push(1); function createEditorBody(){ var editorBody = createElement('div',{ 'cla

让iframe自适应高度-真正解决

需求:实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象. (需要只有iframe出现滚动条) 本人一开始这么写:会造成只有主页面加载是设定一次.但是窗体变小或变大后不会触发. $(function setIframeHeight() { var iframe ;//高度初始化600,为了14寸笔记本 iframe =document.getElementById('mainiframe'); iframe.height=documen

[转]让iframe自适应高度-真正解决

原文地址:https://www.cnblogs.com/rogge7/p/7762052.html 需求:实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象. (需要只有iframe出现滚动条) 本人一开始这么写:会造成只有主页面加载是设定一次.但是窗体变小或变大后不会触发. $(function setIframeHeight() { var iframe ;//高度初始化600,为了14寸笔记本 iframe =document.

IFRAME动态加载触发onload事件(转)

原文地址:http://blog.ops.cc/webtech/javascript/f5nhm.html <body> <script>var iframe = document.createElement("IFRAME"); document.body.appendChild(iframe); iframe.src = "http://www.ops.cc"; if (iframe.attachEvent) { iframe.attac

iframe 动态onload事件处理方式

转自:http://w3help.org/zh-cn/causes/SD9022 标准参考关于 HTML 4.01 规范中 BODY 标记的 onload 属性说明: http://www.w3.org/TR/html401/struct/global.html#h-7.5.1 关于 HTML 4.01 规范中 onload 内在事件说明:http://www.w3.org/TR/html401/interact/scripts.html#adef-onload 关于 DOM Level2 E

javascript创建css、js，onload触发callback兼容主流浏览器的实现

http://www.fantxi.com/blog/archives/load-css-js-callback/ 由于需要写个函数,既可以加载css,又可以加载js,所以对各主流浏览器对加载js.css后是否触发onload事件做了个测试.当然,为了兼容,首先要考虑的是会用到onload和onreadystatechange,但他们并不是万能的.加载js文件onload触发callback不算大问题.css比较特殊,因为Webkeit/FF下加载css不会触发onload事件.所以研究了一晚上

如何解决 iframe 无法触发 clickOutside

注:(1)非原创,来自https://blog.csdn.net/weixin_33985679/article/details/89699215.https://zhuanlan.zhihu.com/p/38392987 (2)focus-outside的github地址:https://github.com/txs1992/focus-outside.使用说明文档:https://github.com/txs1992/focus-outside/releases的reademe 为什么无法触

父窗口jquery触发iframe按钮事件(转载)

原文地址: http://blog.csdn.net/muziduoxi/article/details/11123923 <script type="text/javascript">$(document).ready(function(e){ var iframe = document.getElementById("Box"); if (iframe.attachEvent) { iframe.attachEve

IE IE8 iframe的onload方法分析 IE浏览器onload事件失效

判断iframe是否加载完成的完美方法 IE 支持 iframe 的 onload 事件,不过是隐形的,需要通过 attachEvent 来注册. 第二种方法比第一种方法更完美(采用readystatechange判断),因为 readystatechange 事件相对于 load 事件有一些潜在的问题. 这里感觉说的并不是完全准确,开始给我造成了很大的困扰.看其代码才明白,真正意义上来讲IE在创建一个新的iframe时的onload方法需要使用attachEvent来绑定,而原来就存在的ifr

iframe跨域+

script.image.iframe的src都不受同源策略的影响.所以我们可以借助这一特点,实现跨域.如前面所介绍的JSONP跨域,以及灯标(Beacons). 该篇随笔主要阐述iframe结合一些技术,实现跨域请求. 1.iframe+window.name; 2.iframe+location.hash; 3.iframe+window.postMessage. 另,在最后赋予“灯标”技术阐述. 一.iframe + window.name实现跨域 window对象有个name属性,该属性

js学习笔记：操作iframe

iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载.安全问题.兼容性问题.搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求.制作富文本编辑器.历史记录管理.长连接.无刷新文件上传等方面,可参考一下知乎的这个回答:Iframe 有什么好处,有什么坏处?国内还有哪些知名网站仍用Iframe,为什么?有哪些原来用的现在抛弃了?又是为什么?. 今天就总结一下操作iframe的方法,以及平时的一些使用. 知识点汇总有些事情平时不

三种上传文件不刷新页面的方法讨论：iframe/FormData/FileReader

发请求有两种方式,一种是用ajax,另一种是用form提交,默认的form提交如果不做处理的话,会使页面重定向.以一个简单的demo做说明: html如下所示,请求的路径action为"upload",其它的不做任何处理: <form method="POST" action="upload" enctype="multipart/form-data"> 名字 <input type="text&q

iFrame 功能详解

目录索引: 一. 简介二. 属性三. 功能四. 应用一.简介网页“帧”的概念最早是由Netscape所提出,当时全部由“帧”构成的页面,也被称之为 “框架集”页面,在一个“框架集”页面中,“帧” 是其最小构成单位,每个帧都是一个窗口,用于实现在一个框架集页面中载入许多其它页面.而且,W3C也为其推出了三种文档类型之一的框架型: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://ww

使用iframe的优缺点，为什么少用iframe以及iframe和frame的区别。

注:HTML5不再支持使用frame,iframe只有src 属性一.使用iframe的优缺点优点:1.程序调入静态页面比较方便;2.页面和程序分离;缺点:1.iframe有不好之处:样式/脚本需要额外链入,会增加请求.另外用js防盗链只防得了小偷,防不了大盗.2.iframe好在能够把原先的网页全部原封不动显示下来,但是如果用在首页,是搜索引擎最讨厌的.那么你的网站即使做的在好,也排不到好的名次! 如果是动态网页,用include还好点!但是必须要去除他的<html><head>

让动态的 iframe 内容高度自适应

使用iframe加载其他页面的时候,需要自适应iframe的高度这里加载了两个不同内容高度的页面至iframe中 1. 没有设置高度 <div class="iframe-wrapper"> <iframe name="iframe1" src="iframe1.html" frameborder="0" width="100%"></iframe> <ifram

iframe异步加载技术及性能

我们会经常使用iframes来加载第三方的内容.广告或者插件.使用iframe是因为它可以和主页面并行加载,不会阻塞主页面.当然使用iframe也是有利有弊的:Steve Souders在他的blog里面有阐述:Using Iframes Sparingly: iframe会阻塞主页面的onload事件主页面和iframe共享同一个连接池阻塞主页面的onload是这两个问题中最影响性能的方面.一般都是想让onload时间越早触发越好,一方面是用户体验过更重要的是google给网站的加载速度的

清除iframe onload重新触发

热门专题