热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

iframe加载完成的事件监听及双滚动条问题的解决方案

在使用iframe嵌入外部页面时,经常会遇到页面加载不同步的问题。当嵌入的页面响应较慢时,这种异步加载会导致用户体验不佳。本文介绍了如何通过监听iframe加载完成的事件来解决这一问题,并提出了针对双滚动条问题的有效解决方案,以提升整体的用户体验和页面加载效率。

经常会遇到这样一种情景:
在iframe里嵌入另外一个页面时。如果iframe载入的页面响应较快,或许我们感觉不到页面载入的不同步,但试想,如果一个需要内嵌到iframe里的页面的响应很慢,这里会出现一种什么现象呢?这时将会出现所有页面已经载入完成,但在iframe元素处,将会出现空白,直到内嵌页面完成载入时,该空白处才会显示新载入的页面。

可想而知,一个页面如果长时间的空白,对于浏览者来说将意味着什么。
如果在内嵌页面未载入完成时,给出一种加载提示信息。如:“页面加载中”之类的,我想这对浏览页面用户来讲,将不再是煎熬,更是一种视觉上的享受。

为了实现这样的效果,一般会采用如下原理处理。

  • iframe载入区域给出友好的提示信息
  • 当iframe载入完成时,清空提示信息,而让iframe显示

这些都比较容易,但现在的问题的关键是怎么监听iframe元素内的页面已经载入完成。
关键这个问题,一般来讲,会分两种情况的来讨论解决方案。

  • 同域的嵌套。最好是让子页面调用父页面的方法
  • 如果是异域,但子页面无法修改,那么:在Firefox/Opera/Safari中,可以直接使用iframe onload事件;而在IE中,可以通过定时器测定子页面的document.readyState,或者使用iframe onreadystatechange事件计算该事件的响应

同域嵌套

parent.html
function ifrmLoaded() {
// code here
}
sub.html
window.Onload= function() {
window.parent.ifrmLoaded();
}

嵌套页面不能修改,或者异域嵌套

  • Firefox/Opera/Safari中直接使用iframe onload事件

document.getElementById('ifrm').Onload= function() {
//here doc
}

  • 在IE下,注册iframe onreadystatechange事件

var oFrm = document.getElementById('ifrm');
oFrm.Onreadystatechange= function() {
if (this.readyState && this.readyState == 'complete') {
onComplete();
}
}

兼容Firefox/Opera/Safari/IE的处理方式

var oFrm = document.getElementById('ifrm');
oFrm.Onload= oFrm.Onreadystatechange= function() {
if (this.readyState && this.readyState != 'complete') return;
else {
onComplete();
}
}

双滚动条问题

因为iframe默认是inline-block元素,空白符被解析,所以无端端出现滚动条
使用iframe时,一般会出现双滚动条问题,解决方案如下:
1、修改元素的类型为display:block;
2、修改父级样式,如font-size: 0; 或者line-height:0;
3、修改元素的样式vertical-align:middle;

http://hqlong.com/2009/02/620…


推荐阅读
  • HTML5 Web存储技术是许多开发者青睐本地应用程序的重要原因之一,因为它能够实现在客户端本地存储数据。HTML5通过引入Web Storage API,使得Web应用程序能够在浏览器中高效地存储数据,从而提升了应用的性能和用户体验。相较于传统的Cookie机制,Web Storage不仅提供了更大的存储容量,还简化了数据管理和访问的方式。本文将从基础概念、关键技术到实际应用,全面解析HTML5 Web存储技术,帮助读者深入了解其工作原理和应用场景。 ... [详细]
  • 定义Function类型:1functionsum(num1,num2){return num1+num2;}2varsumfunction(num1,num2){returnn ... [详细]
  • Dom捕捉事件和冒泡事件原理与demo测试
    先参考一下百度百科对冒泡事件流的解释:----------不喜欢读文字的同学,可以直接看下面demo,传递顺序简单明了!ht ... [详细]
  • 在 Angular Google Maps 中实现图片嵌入信息窗口的功能,可以通过使用 `@agm/core` 库来实现。该库提供了丰富的 API 和组件,使得开发者可以轻松地在地图上的信息窗口中嵌入图片。本文将详细介绍如何配置和使用这些组件,以实现动态加载和显示图片的功能。此外,还将探讨一些常见的问题和解决方案,帮助开发者更好地集成这一功能。 ... [详细]
  • 本文深入探讨了 hCalendar 微格式在事件与时间、地点相关活动标记中的应用。作为微格式系列文章的第四篇,前文已分别介绍了 rel 属性用于定义链接关系、XFN 微格式增强链接的人际关系描述以及 hCard 微格式对个人和组织信息的描述。本次将重点解析 hCalendar 如何通过结构化数据标记,提高事件信息的可读性和互操作性。 ... [详细]
  • 本文深入剖析了jQuery的架构设计与实现原理。jQuery的总体结构采用了一个自执行匿名函数的形式,该函数接收`window`和`undefined`作为参数,并在内部定义了一个局部的jQuery副本,以确保其内部变量和方法不会污染全局命名空间。这种设计不仅提高了代码的封装性和安全性,还使得jQuery能够更好地与其他JavaScript库兼容。通过详细分析这一架构,读者可以更好地理解jQuery的核心机制及其高效运行的原理。 ... [详细]
  • 《精通 jQuery》第六章:深入解析与实战应用
    《精通 jQuery》第六章:深入解析与实战应用本章详细探讨了 Ajax 技术的核心机制及其实际应用。Ajax 通过 XMLHttpRequest 对象实现客户端与服务器之间的异步数据交换,从而在不重新加载整个页面的情况下更新部分内容。这种技术不仅提升了用户体验,还提高了应用的响应速度和效率。此外,本章还介绍了如何利用 jQuery 简化 Ajax 操作,并提供了多个实战案例,帮助读者更好地理解和掌握这一重要技术。 ... [详细]
  • JavaScript使ifram跨域相互访问及与PHP通信的实例_javascript技巧
    iframe与主框架相互访问方法1.同域相互访问假设A.html ... [详细]
  • 笔者在Python爬虫爬取职位信息的过程中,使用的web框架为flask,在实验过程中发现请求已经返回成功,但是却无法在页面中显示出结果通过浏览器的控制台发现是因为由于出现了由于跨 ... [详细]
  • 勤奋翻译一篇中文最友爱的,Web Audio API的运用相干的文章
    媒介本文翻译自MDN上的《WebAudioAPIの运用》,这是HTML5中的WebAudioAPI的一个入门教程。原文是英文,但有日本同道翻译的日文版。我更熟习日文,所以重要依据日 ... [详细]
  • 来自Google的前端工程师-PhilipWalton分享了本身关于怎样成为优异的工程师的一些看法。个人感觉很有代价,所以翻译成中文,轻易人人浏览。程度有限,如翻译不妥的地方请在批 ... [详细]
  • 根据时间更改网站背景的脚本。热!
    我在网上找到了它,并以自己的方式对其进行了自定义;作者的功劳就在那里。实际上,这是一个用于更改背景颜色的脚本,并且在我看来& ... [详细]
  • (一)前言:二次开发编辑器neditor(基于百度编辑器ueditor):界面相对于ueditor会更美观.(二)问题描述:最近在公司项目中遇到一个比较奇葩的问题。neidito ... [详细]
  • IE下PHPiframe跨域导致session丢失问题的解决方法|一个登录页面,被别的网站用iframe嵌进去后,死活无法登录(只在IE中存在这种情况)。主要是session无 ... [详细]
  • easyuilayout实战
    第一步: ... [详细]
author-avatar
sprite_77
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有