移花接木(30)- krpano中嵌入html页面

krpano 1.19之后的新技能,就是可将html页面(iframe)作为热点放到3D空间中。

你可以如封面那样放入一个youku的embed视频,或者像下图那样直接放入一个html页面。因为这个就是一个可以变形的iframe。

要做到这种效果,需要什么条件呢?

 

基础代码

目前最新版本的是krpano 1.20.6

 

你必须在html5内核下使用,也就是不支持flash。

 

最后你使用下面一段代码。注意需要确定iframe的尺寸。因为目前还不支持直接放入html元素,因此需要一个黑色或透明图片作为url的图片。当然,直接放入html元素也在klaus未来的计划当中。

注意,hotspot的sprite属性调用只能是css3d渲染下。

 

当然使用layer元素也是可以的。

移除iframe的方法:
 

进阶代码之一

这个代码出现在1.20的下载包中,路径是

你电脑的路径\krpano-1.20.5\viewer\examples\postprocessing\popup_blur.xml

在你自己的xml里放入下面代码

注意这里使用了一个关闭按钮,即close.png,设置在打开窗口的右上角,你可以设置自己的图片。

需要弹出html页面时,即使用popup这个动作,popup这个动作不仅实现了弹出html页面,还可以弹出html代码内容以及弹出图片。

弹出html页面:

这里一共五个参数,第一个参数代表了弹出的内容,如果是html页面,即写’iframe’,第二个参数即要打开的地址,第三个第四个是弹出窗口的宽度和高度,第五个是是否有滚动条。

对于弹出的窗口本身的设置,可以在之前嵌入的(黄色高亮)代码中找到。

可设置背景、边框等等。

如果需要弹出htm内容:

‘html’代表的是html内容,那内容就是name为data_html_example的data元素,也即是第二个参数。

如果需要弹出图片

弹出图片的话只需要两个参数,第一个参数是’image’,第二个参数是该图片的路径,动作会根据该图片的尺寸自动调整背景层的大小。

 

进阶代码之二

实现动态更新iframe内容。

点击文字按钮打开网页。

点击右上角关闭按钮关闭网页。

demo完整代码(可在窗口中点击鼠标右键 – 点击 fullscreen全屏)

在使用之前,请注意demo是没有keep属性,正常要为iframelayer这个layer增加 keep=”true”

 

以下部分是载入iframe用的iframelayer以及对应的关闭按钮部分。

放在scene的外面

关闭按钮closeiframe_button的url、align、x、y可自行修改。

注意,你需要准备一张纯黑色的jpg或png图片。几k的体积就可以了。

 

以下部分是实现嵌入网页的action。

放在scene的外面

 

下面是实现弹出网页的action,你可以在任意可以写action的位置写,包括onclick等。

非常简单,直接替换里面的网址换成你的网址即可。

 

进阶代码之三

这个代码是通过textfiled插件实现的。

点击文字按钮打开网页。

点击右上角关闭按钮关闭网页。

demo完整代码(可在窗口中点击鼠标右键 – 点击 fullscreen全屏)

在使用之前,请注意demo是没有keep属性,正常要为iframelayer这个layer增加 keep=”true”

 

以下部分是载入iframe用的iframelayer以及对应的关闭按钮部分。

放在scene的外面

关闭按钮closeiframe_button的url、align、x、y可自行修改。

 

以下部分是实现嵌入网页的action。

放在scene的外面

下面是实现弹出网页的action,你可以在任意可以写action的位置写,包括onclick等。

直接替换里面的网址换成你的网址即可。

第一个参数里iframesrc是要新建layer的name,iframelayer是第一个参数中新建layer指定的父元素,就是说iframesrc是iframelayer的子元素。