iframe in ipad safari

flex_莫冲

浏览: 1104588 次
性别:
来自: 广州

最近访客更多访客>>

my_xinwen

MarshWinter

fuhsea

gzhif815

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

html5

今天要在web中嵌套一个网址或本地HTML，用到了iframe，在电脑上设置scrolling=‘auto’，宽度高度，会有滚动条出现。而在ipad上会全部显示整个网页的宽度高度。scrolling属性无效。原来在html5中的iframe已经只有剩下src的属性。
但是若设置scrolling=‘no’.还是会生效的。页面只显示定义的高度和宽度的大小。设置overflow:hidden都没用。

怎么让ipad safari 中的iframe的内容在固定大小中可滚动？

网上说要用seamless属性。直接写个seamless。但是这个属性ipad的safari不支持。chrome是支持的。

IE6 – Windows: no support
IE7 – Windows: no support
IE8 – Windows – Windows: no support
IE9 beta – Windows: no support
Firefox 3.6 – Windows: no support
Firefox 3.6 – OSX: no support
Firefox 4.0 – beta Windows: no support
Firefox 4.0 – beta OSX: no support
Safari OSX: no support
Chrome 7 – Windows: no support
Chrome 7 – Windows: no support
Chrome 9 – OSX: no support
Opera 11 – OSX: no support

测试例子：
http://www.maxdesign.com.au/jobs/example-seamless/

所以以上方法都无法解决ipad safari中iframe滚动的问题。

解决办法：
在iframe外加一层div，设置样式-webkit-overflow-scrolling:touch; overflow: scroll;
让超出div的内容可以通过touch来滚动。

另外，如果iframe的src不是网址，而是本地的html，则需要给HTML的DOM添加监听事件，让html的body可以监听到touch事件，让嵌套的html也可以滚动。

var toScrollFrame = function(iFrame, mask) {
					if (!navigator.userAgent.match(/iPad|iPhone/i))
						return false;
					//do nothing if not iOS devie

					var mouseY = 0;
					var mouseX = 0;
					jQuery(iFrame).ready(function() {//wait for iFrame to load
						//remeber initial drag motition
						jQuery(iFrame).contents()[0].body.addEventListener('touchstart', function(e) {
							mouseY = e.targetTouches[0].pageY;
							mouseX = e.targetTouches[0].pageX;
						});

						//update scroll position based on initial drag position
						jQuery(iFrame).contents()[0].body.addEventListener('touchmove', function(e) {
							e.preventDefault();
							//prevent whole page dragging

							var box = jQuery(mask);
							box.scrollLeft(box.scrollLeft() + mouseX - e.targetTouches[0].pageX);
							box.scrollTop(box.scrollTop() + mouseY - e.targetTouches[0].pageY);
							//mouseX and mouseY don't need periodic updating, because the current position
							//of the mouse relative to th iFrame changes as the mask scrolls it.
						});
					});

					return true;
				};

				toScrollFrame('.myFrame', '.myMask');

最终代码

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>wrapScroller demo</title>
		<link rel="stylesheet" href="../style/wrapScroller.css" type="text/css" media="screen" />
		<script type="text/javascript" src="../jquery-1.8.0.min.js"></script>
		<script type="text/javascript">
			
		</script>
	</head>
	<body style="background: #ccc;">
		<div>
			HEADER - use 2 fingers to scroll contents:
		</div>
		<div id="scrollee" style="width:300px;height:300px;-webkit-overflow-scrolling:touch; overflow: scroll;">
			<iframe id="object" height="90%" width="100%" type="text/html" src="http://en.wikipedia.org/"></iframe>
		</div>
	</body>
</html>

参考：
http://stackoverflow.com/questions/6139564/iframe-size-on-ipad
http://jsfiddle.net/CobaltBlueDW/zHR8s/
http://stackoverflow.com/questions/4804604/html5-iframe-seamless-attribute

分享到：

video element in ipad safari | 控制台函数总结

2013-01-08 16:11
浏览 5310
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

scratch少儿编程逻辑思维游戏源码-超级马力欧兄弟.zip: scratch少儿编程逻辑思维游戏源码-超级马力欧兄弟.zip

scratch少儿编程逻辑思维游戏源码-城堡躲避.zip: scratch少儿编程逻辑思维游戏源码-城堡躲避.zip

气动力学驱动的导弹姿态控制技术及其MATLAB仿真研究: 内容概要：本文探讨了基于气动力学的导弹姿态控制技术，并详细介绍了其MATLAB仿真方法。文章首先阐述了气动力学的基本概念以及其在导弹设计中的重要性，随后讲解了导弹姿态控制系统的构成，包括传感器、控制器和执行器的功能。接下来，重点介绍了如何利用MATLAB进行导弹飞行过程和姿态控制的仿真，包括建立导弹模型、设定环境参数、编写仿真代码等步骤。最后，通过仿真展示了气动力学在提升导弹飞行稳定性、机动性和作战效能方面的重要作用，并对未来的研究方向进行了展望。适合人群：航空航天工程领域的研究人员、导弹系统设计师、从事飞行器控制研究的专业人士。使用场景及目标：适用于希望深入了解导弹姿态控制原理及其仿真的专业人士，旨在提高导弹飞行性能和作战能力。其他说明：文中提供的MATLAB代码仅为简化的示例，实际应用时需考虑更多复杂的因素和算法。

scratch少儿编程逻辑思维游戏源码-电镀盒子.zip: scratch少儿编程逻辑思维游戏源码-电镀盒子.zip

基于DSP28335与STM32F407的锁相环程序在电源逆变系统中的应用及其实现: 内容概要：本文详细介绍了DSP28335与STM32F407在电源逆变系统中的锁相环（PLL）程序应用。首先概述了锁相环的基本概念及其在逆变系统中的重要性，然后深入探讨了DSP28335锁相环程序的特点和功能，如正弦波锁定、频率和相位跟踪、全桥逆变等功能。接着阐述了具体的实现步骤，包括系统配置、PLL算法选择、滤波器设计、正弦波生成与输出，最后进行了性能分析，强调了该程序在提高系统性能、稳定性和效率方面的优势。适合人群：从事电力电子、嵌入式系统开发的技术人员，特别是对锁相环和逆变系统感兴趣的工程师。使用场景及目标：适用于需要深入了解锁相环在电源逆变系统中应用的研发人员，旨在帮助他们掌握PLL的工作原理、实现方法及其优化技巧，以提高逆变系统的性能和可靠性。其他说明：文中提供的技术细节和实现方法有助于读者更好地理解和应用锁相环技术，特别是在高频、高精度的逆变场合。

scratch少儿编程逻辑思维游戏源码-Shape Smasher.zip: scratch少儿编程逻辑思维游戏源码-Shape Smasher.zip

少儿编程scratch项目源代码文件案例素材-审美乌托邦.zip: 少儿编程scratch项目源代码文件案例素材-审美乌托邦.zip

少儿编程scratch项目源代码文件案例素材-潜水艇.zip: 少儿编程scratch项目源代码文件案例素材-潜水艇.zip

scratch少儿编程逻辑思维游戏源码-3D忍者.zip: scratch少儿编程逻辑思维游戏源码-3D忍者.zip

新能源领域基于EMD-ARMA的风光出力预测方法及其应用: 内容概要：本文介绍了基于EMD-ARMA的组合风光出力预测方法，详细阐述了经验模态分解（EMD）和自回归移动平均（ARMA）模型的应用步骤。首先，通过EMD将原始发电数据分解为多个本征模态函数（IMF），然后用ARMA模型对各IMF分量进行建模和预测，最后将预测结果叠加重构，获得最终的风光功率预测值。文中还提供了简化的Python代码示例，帮助读者理解和实现该方法。适合人群：从事新能源研究和技术开发的专业人士，尤其是对风光发电预测感兴趣的科研人员和工程师。使用场景及目标：适用于需要提高风光发电预测精度的项目，旨在通过先进的数学模型优化电力调度和资源配置。其他说明：本文提供的代码示例仅用于教学目的，实际应用中需根据具体情况调整和完善。此外，建议在实践中参考更多专业文献和寻求专家意见以确保预测模型的准确性和可靠性。

scratch少儿编程逻辑思维游戏源码-宝石消消乐.zip: scratch少儿编程逻辑思维游戏源码-宝石消消乐.zip

少儿编程scratch项目源代码文件案例素材-染色奔跑.zip: 少儿编程scratch项目源代码文件案例素材-染色奔跑.zip

Comsol仿真超构表面光子晶体动量空间拓扑荷识别图绘制指南: 内容概要：本文详细介绍了使用Comsol仿真软件绘制超构表面光子晶体动量空间拓扑荷识别图的方法。首先简述了超构表面光子晶体的基本概念及其重要性，然后逐步讲解了如何在Comsol中建立模型、设置仿真参数并运行仿真，最终生成动量空间拓扑荷识别图。文中还附有简单代码示例，帮助读者更好地理解整个流程。最后对所学内容进行了总结，并展望了未来的研究方向。适合人群：对光学、物理学以及仿真软件感兴趣的科研人员和技术爱好者。使用场景及目标：适用于希望深入了解光子在超构表面光子晶体中传播特性的研究人员，旨在提高他们对该领域的认识水平，促进相关科学研究的发展。阅读建议：由于涉及较多专业术语和复杂概念，在阅读时建议先掌握基本理论知识，并结合实际案例进行练习，以便更好地消化吸收文中内容。

基于CNN-LSTM与SE注意力机制的时序数据分析及应用(MATLAB实现): 内容概要：本文介绍了一种结合卷积神经网络(CNN)、长短时记忆网络(LSTM)以及SE注意力机制的混合模型用于时序数据分类预测的方法，并提供了具体的MATLAB实现方法。文中详细解释了模型的工作流程，从卷积层的空间特征提取开始，经过SE注意力模块对特征进行加权处理，再到LSTM层的时间序列建模，最终完成分类任务。此外，还讨论了一些优化技巧，如数据预处理、动态学习率设置、特征压缩等，以提高模型性能。适合人群：有一定机器学习基础的研究人员和技术开发者，特别是那些从事医疗健康、工业监控等领域时序数据分析工作的专业人士。使用场景及目标：适用于需要高效处理复杂时序数据的应用场合，如医疗诊断、工业设备状态监测等。主要目的是为了改善传统单一模型在特征利用方面的局限性，提供一种更加精准有效的解决方案。其他说明：文中提供的代码片段可以直接应用于实际项目中，只需根据具体情况调整参数配置和数据格式。同时提醒使用者关注数据预处理步骤，确保输入数据的质量和一致性对于获得良好结果至关重要。

scratch少儿编程逻辑思维游戏源码-超级摇摆小猫.zip: scratch少儿编程逻辑思维游戏源码-超级摇摆小猫.zip

scratch少儿编程逻辑思维游戏源码-奔跑吧！糖豆人.zip: scratch少儿编程逻辑思维游戏源码-奔跑吧！糖豆人.zip

基于Python实现的旋翼无人机(UAV)六自由度动力学模型及其应用: 内容概要：本文档详细介绍了旋翼无人机（UAV）的动力学建模方法，重点在于六自由度模型的构建。首先定义了一个简化的四旋翼无人机动力学类，涵盖了质量、惯性矩阵、重力加速度等基本物理参数，并实现了推力矩阵的计算，用于将电机转速转化为推力和力矩。接着讨论了姿态更新过程中四元数的作用，提供了四元数更新的具体实现方式，强调了归一化操作的重要性。此外，还探讨了传感器噪声对飞行控制系统的影响，提出了一个较为真实的陀螺仪噪声模型，考虑到了随机游走特性和低通滤波效果。最后给出了一个简易的数值积分循环示例，展示了如何利用上述模型进行仿真。适用人群：从事无人机研究、开发的技术人员，尤其是对飞行器动力学建模感兴趣的工程师。使用场景及目标：适用于希望深入了解无人机内部工作原理的研究者和技术开发者，旨在帮助他们掌握从理论到实践的关键步骤，包括但不限于动力学建模、姿态控制、传感器误差补偿等方面的知识。其他说明：文中提供的代码片段均为简化版本，实际应用中可根据具体需求调整参数设置和算法细节。同时推荐使用专业数学库来提高代码效率和准确性。

少儿编程scratch项目源代码文件案例素材-女巫.zip: 少儿编程scratch项目源代码文件案例素材-女巫.zip

FPGA数据采集系统的多技术集成：千兆以太网、SD卡存储、AD7606数模转换与串口通信: 内容概要：本文详细介绍了基于FPGA的数据采集系统，重点讨论了如何将其与多种关键技术集成，以提升数据采集和处理的效率与稳定性。首先，阐述了FPGA数据采集系统的特性及其重要性。接着，分别介绍了RTL8211千兆以太网控制器的应用，用于实现数据的快速传输；SD卡存储解决方案，确保数据的持久化保存；AD7606数模转换技术，保障信号的精准转换；最后，讲解了串口通信软件程序的设计与实现，促进不同设备间的通信。通过这些技术的集成，实现了对各类信号的实时采集、处理和传输。适合人群：从事嵌入式系统开发的技术人员，尤其是对FPGA数据采集系统感兴趣的工程师和技术爱好者。使用场景及目标：适用于需要高性能数据采集和处理的场合，如工业自动化、科研实验、环境监测等领域。目标是帮助技术人员理解和掌握如何利用FPGA搭建高效的多技术集成数据采集系统。其他说明：文中不仅提供了理论介绍，还涉及实际应用案例和技术细节，有助于读者深入理解各组件的工作原理及其协同工作的机制。

Qt上位机利用libharu库生成pdf，添加附件，实际就是demo中的attach例程: Qt上位机利用libharu库生成pdf，添加附件，实际就是demo中的attach例程

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论