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

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

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

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

 

基础代码

首先你必须使用krpano 1.19,目前最新版本的是krpano 1.19 pr6。尽管这个是一个预览版,但据klaus所说,这个预览版已经相当稳定,之所以不出正式版,正应了那句话:万事俱备只欠东风。

 

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

 

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

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

 

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



移除iframe的方法:

 

进阶代码之一

实现动态更新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的子元素。