embedpano的功能。 js脚本
脚本包括
查看器嵌入
嵌入参数
启动/嵌入变量
查看器删除
指出了使用移动设备上(iPhone、iPad、Android)
例子
embedpano的功能。 js脚本
创建并将krpano查看器嵌入到HTML页面。
自动检查闪光或HTML5支持和自动加载适当的krpano查看器。
几个浏览器,跨系统鼠标滚轮修复(wheel-zooming page-scrolling Mac支持,触摸板/ continues-wheel支持,车轮速度标准化)。
当使用固定的几个Flashplayer限制窗口模式=透明或不透明。
自动启用flash播放器的使用全屏模式。
脚本也可以合并一起krpano HTML5浏览器脚本集成到一个脚本文件(例如“tour.js”)。当使用krpano帕诺人或使VTOUR滴这将是默认自动完成。
脚本包括嵌入脚本需要包含在html页面的任何地方。
包括它只是这样:<script src="embedpano.js"></script>
当一个脚本文件将使用HTML5嵌入式查看器,就包括这个文件:<script src="tour.js"></script>查看器嵌入创建html页面上的任何地方<div >观众应该嵌入元素,给它一个独特的id通过css样式名称和定义它的大小:<div id="pano" style="width:100%height:100%"></div>
在定义了<div >元素,创建一个<脚本>元素嵌入脚本代码。的embedpano.js脚本提供了一个embedpano()查看器嵌入函数:
embedpano({...embedding parameters...})
embedpano()函数需要的对象嵌入参数。
完整的例子:<script src="embedpano.js"></script><div id="pano" style="width:600pxheight:400px"></div><script>embedpano({swf:"krpano.swf", xml:"pano.xml", target:"pano"})</script>
嵌入参数embedpano()函数只需要一个Javascript对象作为参数。这个对象是用来传递所有参数(随机)通过使用parametername:价值对。(除了几乎所有的参数目标参数)是可选的,当他们没有定义,将使用默认值。的参数对象提供了以下设置:
swf:"krpano.swf"
名称和路径查看器”。 swf文件(相对于html文件)。
默认值是“krpano.swf”。
js:"krpano.js"
名称和路径krpano HTML5浏览器”。 js文件(相对于html文件)。
默认情况下相同的路径和文件名设置的基础主权财富基金设置将被使用,只是与“。 js的扩展,而不是. swf。
这个设置将被忽略当HTML5浏览器嵌入到嵌入脚本文件。
xml:"krpano.xml"
启动xml文件名称和路径(相对于html文件)。
默认名称相同的基本文件名的swf文件将使用(例如krpano。 xml krpano.swf)。
target:"...pano-div-id..."
浏览器的html元素的id应该嵌入。
将会有一个“警报() 当没有目标的错误。
id:"krpanoSWFObject"
内部观察者对象的id。
这将是观众通过连接的对象javascript接口。
默认id“krpanoSWFObject”。
重要的是,每个观众都有一个惟一的id !
当已经存在一个对象具有给定id,然后嵌入脚本将自动添加数字id,直到年底是独一无二的。
bgcolor:"#000000"
观众的背景颜色(颜色在html格式)。
默认值是“000000 #”(=黑)。
wmode:"..."
设置flash播放器窗口模式 设置。
可能的设置:
窗口——flash播放器默认情况下,系统支持和性能之间的妥协。注意:在许多系统和浏览器,html元素不能重叠的flash播放器模式!看到这窗口模式链接的细节。
不透明的——允许其他html元素重叠Flashplayer(慢的渲染性能)。
透明的——使flash播放器背景透明,允许看到html元素flash播放器后面,此外还允许其他html元素重叠flash播放器(更慢的渲染性能)。
直接——最佳性能,硬件加速表示,没有html重叠在许多系统和浏览器(这通常是最快的方式,但在不兼容或旧系统/浏览器这可能会导致经济放缓)。
krpano将使用窗口模式=直接默认情况下,除了铬-窗口模式=窗口将使用默认(窗口大小调整期间更好的性能和黑色)。
HTML5指出:窗口模式通常是一个Flash-only设置,但窗口模式=透明也将评估krpano HTML5的观众,使背景透明的。 在HTML5浏览器重叠本身总是可能的。
html5:"auto"
设置krpano HTML5浏览器使用。
可能的设置:
汽车——默认设置自动使用HTML5 krpano查看器。
设置,krpano Flash查看器将使用默认桌面和krpano HTML5观众只有当Flashplayer不可用或者当手机/平板电脑将被使用。
更喜欢——喜欢krpano HTML5查看器的使用。
设置,krpano HTML5查看器将使用默认情况下,和krpano Flash查看器只有当系统/浏览器不是方能尽享。
回退——喜欢krpano Flash查看器的使用。使用krpano HTML5浏览器后退闪时不可用。
只有——只使用HTML5 krpano查看器——从不使用krpano Flash查看器。
设置,krpano HTML5查看器将在可能的情况下使用。当系统/浏览器不是方能尽享,那么将显示一条错误消息。
总是总是使用HTML5 krpano查看器,无论系统/浏览器是否支持它。警告——这个设置应该只用于内部测试!
从来没有——从不使用HTML5 krpano查看器,强制使用krpano Flash观众。
设置为HTML5浏览器扩展:(测试)
的html5设置可以扩展“webgl”或“css3d”来定义哪些绘制技术时应优先都可用。
使用例子:html5 =“汽车+ css3d”,html5 = "喜欢+ webgl”,……
当可用默认WebGL将首选。
flash:""
设置krpano Flash浏览器使用。
这是一个基本一样html5设置,逆。它可以用于更好的url,例如通过使用flash =喜欢而不是html5 =后退。
当闪光设置将被设置,它将映射到一个html5设置和覆盖它。
可能的设置:
没有设置,使用html5设置。
汽车- - - - - -一样html5 =汽车。
更喜欢——喜欢krpano Flash查看器的使用。
使用HTML5 krpano观众只有当没有flash播放器和系统/浏览器方能尽享。
这个设置将映射到html5 =后退。
回退——喜欢krpano HTML5查看器的使用。使用krpano Flash观众只是后备当HTML5是不可用的。
这个设置将映射到html5 =喜欢。
只有——只使用krpano Flash查看器——从不使用krpano HTML5查看器。
设置,krpano Flash查看器将在可能的情况下使用。当没有flash播放器,那么将显示一条错误消息。
这个设置将映射到html5 =没有。
从来没有——从不使用krpano Flash浏览器,只使用krpano Flash查看器。
这个设置将映射到html5 =只。
vars:{...}
通过与krpano Javascript对象变量:值对。
这可用于设置krpano启动变量并设置任何其他krpano变量或设置。
将被设置的变量后xml文件加载和解析。
所以这些变量可以用来添加新设置或覆盖设置已经在xml中定义的。
例子:var settings = {}settings["onstart"] = "trace('on start...')"settings["view.hlookat"] = 30embedpano({xml:"pano.xml", target:"pano", vars:settings})
initvars:{...}
通过与krpano Javascript对象变量:值对。
这基本上是一样的增值设置,但是这些变量将被设置之前xml文件将被加载和解析。
的主要使用此设置将变量可以设置自定义路径作为占位符里面url路径在xml文件中和/或设置变量,可以使用xml-if-checks为<包括>元素。
例子:embedpano({..., initvars:{mypath:"./panos1/"} })XML:url="%$mypath%image.jpg"
能够通过initvars变量通过http查询直接在html文件的url语法需要使用:tour.html?initvars.variable=value
basepath:...
设置一个自定义的基本路径解决路径相对于krpano swf文件。
可用于Flash和HTML5调整相对路径的xml。
consolelog:false
一个布尔设置定义如果krpano日志/跟踪消息应该发送到浏览器的Javascript控制台。
mwheel:true
一个布尔设置来控制鼠标滚轮的使用。
当设置为真正的(默认),那么可以使用鼠标滚轮事件将被捕获并查看器(例如缩放)。
当设置为假,那么任何鼠标滚轮的使用将被忽略,浏览器将其默认鼠标滚轮处理(通常是滚动网页)。
mobilescale:0.5
默认情况下所有krpano内容0.5将扩大在移动设备上。
禁用扩展,设置mobilescale设置为1.0。
这可以用于实现响应设计。
参见xmlstagescale设置。
fakedevice:""
假的krpano设备检测设置。
可以设置:“移动”,“平板电脑”,“桌面”。
注意:这个设置应该仅用于内部测试,从未发布!
onready:...Javascript-Function...
的onready设置可用于设置call-back-function完成通知当嵌入和krpano查看器准备使用。
给定的函数将被调用krpano javascript接口对象。
例子:embedpano({target:"krpanoDIV", onready:krpanoReady})function krpanoReady(krpano){ krpano.call("trace(krpano is ready...)")}
Flashplayer指出:这个函数需要的外部接口flash播放器!这意味着回调将本地离线工作/只有当flash播放器的安全设置进行调整。在这里看到更多detatils -本地/离线使用。
onerror:...Javascript-Function...
的onerror设置可用于设置一个自定义embedding-error-handling功能。
给定的函数将调用一个错误消息字符串作为参数。
passQueryParameters:false
一个布尔值设置。 当设置为真正的从html url,所有查询参数作为变量传递给观众。
当启用时,它也可以通过html5,闪光,窗口模式,mobilescale,fakedevice和initvars设置直接在html的url。
使用的例子:tour.html?html5=only&startscene=scene2&initvars.design=flat
启动/嵌入变量有一些特殊的变量,它可以使用嵌入观众。 这些变量并不会直接传递给观众,他们有一个嵌入本身特殊的意义:
xml
与xml变量可以指定路径/名称启动的xml文件。
当没有xml变量将将使用“默认加载”,试图加载一个xml文件具有相同的“:”swf文件(例如krpano.swf⇒krpano。 xml或pano.swf⇒pano.xml或tour.swf⇒之旅。 xml等等……)。
simulatedevice
这个变量允许测试iPhone / iPad /安卓桌面布局和图片。可能的设置:
iphone-模拟iPhone / iPod
ipad——模拟iPad
useragent——模拟设备根据用户代理
androidmobile模拟一个Android的移动设备(Flash)
安卓或androidtablet模拟一个Android平板电脑(Flash)
的krpano iPhone / iPad模拟器(包括在查看器中下载包)一起使用,设置一个iPhone / iPad的背景和一个原始大小的观察窗。
查看器删除为消除帕诺人观众从html页面removepano()函数需要使用!removepano()函数将删除所有内部附加mouse-fixes(Flash)和所有DOM元素和事件(HTML5)。
removepano(id)
removepano()函数需要调用与独特id查看器的对象。
例子:embedpano({target:"panoDIV", id:"pano1"})...removepano("pano1")
指出在移动设备上使用(iPhone、iPad、Android…)有一些设置可用的html文件,应该得到尊重,当试图让所有设备优化结果:
总是使用HMTL5 doctype html文件:<!DOCTYPE html>
正确的1:1 pixel-mapped显示,任何类型的自动页面/视窗扩展应该禁用。这可以通过使用<元>视窗设置html <头>元素:<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />注:“target-densitydpi = device-dpi”设置是只知道Android和可能导致一个警告在其他浏览器(iOS,Chrome,…)在Javascript控制台——在这种情况下可以忽略这个警告。
不要使用<iframe >元素包括观众——总是包括观众直接在页面上。当使用iframes iframe内的页面/窗口缩放不能控制和元素可以出现在一个错误的大小。扩展可以发生在这种情况下,还会影响显示质量。
例子1。 最简单的用法:<script>embedpano({target:"pano"})</script>这里将使用所有缺省值:“krpano。 主权财富基金”的名字flash文件查看器,“krpano。 xml”作为默认的xml文件,“krpanoSWFObject“观众id和100%的大小。只有帕诺人的目标应该是嵌入式必须设置。2。 简单使用但更多的设置:<script>embedpano({swf:"pano.swf", xml:"pano.xml", target:"pano"})</script>这里的路径将swf和xml文件。3。 喜欢HTML5查看器:<script>embedpano({swf:"pano.swf", xml:"pano.xml", target:"pano", html5:"prefer"})</script>4。 设置不透明的窗口模式设置:<script>embedpano({swf:"pano.swf", xml:"pano.xml", target:"pano", wmode:"opaque"})</script>5。 选择性使用HTML5——喜欢只在Android和HTML5 IE10触摸设备上:<script>function selecthtml5usage() { // check for Android: if( navigator.userAgent.indexOf("Android") >= 0 ) return "prefer" // check for IE10 with multi-touch display: if( (navigator.msMaxTouchPoints|0) >1 ) return "prefer" // for all other cases use html5=auto: return "auto"} embedpano({xml:"pano.xml", target:"pano", html5:selecthtml5usage()})</script>
HTML5嵌入到APP中方法：1、android webview控件加载html5；
2、即webview基于webkit内核支持html5；
3、进行做自定义屏幕适应调试和测试！
问题描述web页面采用html5技术实现，在系统登录页面中使用frameset、frame来嵌套另一个页面，结果当android2.3移动设备访问该页面时触摸屏不能上下滑动页面。
解决方法
1.首先将该页面简单化，去掉frame相关标签，结果可以滑动页面，但是根据系统设计需要，frame相关标签不能去掉；
2.折腾很久未果，最后发现代码里有viewport的注释痕迹，于是尝试使用html5的viewport，查找viewport的使用方法，并根据需要适当修改其中的一些参数如下，结果很令人满意，问题解决了。
<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
viewport 语法介绍：
<!– html document –>
<meta name=”viewport”
content=”
height = [pixel_value | device-height] ,
width = [pixel_value | device-width ] ,
initial-scale = float_value ,
minimum-scale = float_value ,
maximum-scale = float_value ,
user-scalable = [yes | no] ,
target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]
”
/>
target-densitydpi
—-一个屏幕像素密度是由屏幕分辨率决定的，通常定义为每英寸点的数量（dpi）。Android支持三种屏幕像素密度：低像素密度，中像素密度，高像素密度。一个低像素密度的屏幕每英寸上的像素点更少，而一个高像素密度的屏幕每英寸上的像素点更多。Android Browser和WebView默认屏幕为中像素密度。
什么是Viewport
手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag，让网页开发者来控制 viewport 的大小和缩放，其他手机浏览器也基本支持。
关于viewport的一些问题
viewport并非只是ios上的独有属性，在android、winphone上同样也有viewport。它们要解决的问题是相同的，即无视设备的真实分辨率，直接通过dpi，在物理尺寸和浏览器之间重设分辨率，这个分辨率和设备的分辨率无关。比如，你拿个3.5寸-320 * 480的iphone3 gs、3.5寸-640 * 960的iphone4或者9.7寸-1024*768的ipad2，虽然设备的分辨率不同,物理尺寸也不同，但你可以通过设置viewport让它们在浏览器里有相同的分辨率。比如说，你的网站是800px宽，你可以通过设置viewport的width=800，来让你的网站在这三个不同的设备上都刚好满屏显示你的网站。
以上的知识，相信每个对viewport稍有了解的同学应该都已经了解了。这不是我今天想说的重点。我想说明的是viewport在ios和android上的一些差异表现。
网上一搜关于viewport的知识，基本上全都是如下信息：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
这段代码的意思是，让viewport的宽度等于物理设备上的真实分辨率，不允许用户缩放。一都主流的web app都是这么设置的，它的作用其实是故意舍弃viewport，不缩放页面，这样dpi肯定和设备上的真实分辨率是一样的，不做任何缩放，网页会因此显得更高细腻。玩ps的同学应该都知道，当你将一张1000 * 1000的图片直接缩放至500 * 500分变成什么样，对吧？图片的失真一定逃不掉。
但我要做的一个应用却恰恰相反，需要利用viewport，利用缩放。不论真实分辨率是多少，无论物理尺寸是多少，我都希望在浏览器里，能有统一的分辨率，同时也不允许用户缩放。我用来测试的设备有：iphone4、ipad2、htc的g11、不知道什么厂商的aquos phone（android系统）、华硕的android pad、dell的winphone然后我一路遇到了如下问题：
1）如果不显示地设置viewport，那么width的默认为980。如果页面的所有元素宽度都小于980，此时width为980，如果页面最宽的位置超过980，那么width等于最大宽度。总之，默认能将整个页面从左到右显示出来。如果设置了viewport，比如，只单纯地设置了user-scalable=no，例如<meta name="viewport" content="user-scalable=no" />，那么ios下width还是按980显示（即默认就会通过dpi缩放），但android和winphone下却不会再缩放了，浏览器分辨率和真实设置分辨率一致。
2）对于ios设备，设置width可以生效，但对于android，设置width并不会生效。ios设备，缩放的比率即dpi是通过你设置的width和设置真实分辨率自动计算的，而android下你设置width无效，你能设置的是一个特殊的字段target-densitydpi，关于target-densitydpi可以参考一下这篇文章：http://hi.baidu.com/j_fo/blog/item/748361279ebccd18908f9d7d.html。也就是说，有三个变量：浏览器width、设备真实width、dpi。 我们简单地用个公式来表达它们之间的关系吧（并非真实关系，简单说明用） 设备真实width * dpi = 浏览器width，这里的三个变量，设备真实width是个我们不能操作的已知值，另外两个变量我们可以设置一个来影响另一个，在ios中，我们能改的是浏览器width，dpi自动生成，而在android中，我们能改的是dpi，浏览器width自动生成。对于android，无论我们如何设置width，也不会对浏览器width产生影响。
ps：这里我另外再说一个奇怪的问题：在htc的g11里（htc的手机我只有这一个，别的没有测），如果设置了dpi而不显示地设置width，则user-scalable=no不生效，即是说：<meta name="viewport" content="target-densitydpi=300,user-scalable=no" />，无法阻止用户缩放屏幕。我们需要显示地设置一下width值，仅管这个值对android下的浏览器分辨屏并不产生任何影响（对ios还是会产生影响的），我们仍然要设置它，而且这个值一定要大于320，如果小于等于320，也无法使user-scalable=no生效。这个问题只在htc的g11手机上出现，在aquos phone没有这个问题。兼容android真是件头痛的事 @_@，未来还不知道有多少坑呢。而在winphone上，结果就更奇怪了：我给viewport的width设一个大于480的值，user-scalable=no就失效了，而设一个小于480的值，user-scalable=no能生效。但无论我给viewport的width设多少值，对winphone真正显示的width却并不产生我预期的影响，通过target-densitydpi也没有影响。设置width，如果小于480的话，屏幕会缩放，但缩小的比例却和我预期完全不一样，我不知道它是按照什么规律缩放的。不知道这是winphone的问题，还是dell实现的问题。
3）这一条和上一条应该是直接相关的：ios设备在横竖屏时，会自动调整dpi，无论横屏还是竖屏，都能保证浏览器width等于viewport中设置的值，所以横竖屏的时候，页面里显示的内容的大小是会自动缩放产生变化的。而android手机在横竖屏的时候，不会改变dpi，在横竖屏的时候，网页不会产生缩放。也正因此，ios可以保证横竖屏页面都不会产生滚动条，满屏显示，而android却无法保证这一点，横着满屏则竖着无法满屏，反之亦然。
4）对于ios设备，如果width显示定义了，而页面最宽的位置超过width的话，width无效，仍按最宽的宽度来显示（不会有滚动条）。但此时会出现一个很奇怪的问题，当你将手机横竖屏切换几次之后，会发现你的页面自动放大了，出现了滚动条，但其实放大后的宽度其实和你设的width也并没有关系。为了防止这种情况出现，你需要将width的宽度设置得比页面最宽的地方更大，或者相同。
