krpano教程 - krpano中嵌入html页面,实现点击弹出html网页iframe窗口
这是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 name="iframelayer"
url="black.png"
ath="0" atv="0"
distorted="true"
renderer="css3d"
onloaded="delayedcall(0,add_iframe('https://www.anjiaotong.com/embed/p4j18C0CEEg', 640, 360));"
/>
<action name="add_iframe" type="Javascript">
var iframe = document.createElement("iframe");
iframe.style.position = "absolute";
iframe.style.left = 0;
iframe.style.top = 0;
iframe.style.width = "100%";
iframe.style.height = "100%";
iframe.style.border = 0;
iframe.src = args[1];
iframe.setAttribute('id',resolve(caller.name));
caller.registercontentsize(args[2], args[3]);
caller.sprite.appendChild(iframe);
caller.sprite.style.webkitOverflowScrolling = "touch";
caller.sprite.style.overflowY = "auto";
caller.sprite.style.overflowX = "auto";
</action>
注意,hotspot的sprite属性调用只能是css3d渲染下。
当然使用layer元素也是可以的。
<layer name="iframelayer"
url="black.png"
align="center"
onloaded="delayedcall(0,add_iframe('http://www.nongyejing.com/', 640, 360));"
/>
<action name="add_iframe" type="Javascript">
var iframe = document.createElement("iframe");
iframe.style.position = "absolute";
iframe.style.left = 0;
iframe.style.top = 0;
iframe.style.width = "100%";
iframe.style.height = "100%";
iframe.style.border = 0;
iframe.src = args[1];
iframe.setAttribute('id',resolve(caller.name));
caller.registercontentsize(args[2], args[3]);
caller.sprite.appendChild(iframe);
caller.sprite.style.webkitOverflowScrolling = "touch";
caller.sprite.style.overflowY = "auto";
caller.sprite.style.overflowX = "auto";
</action>
移除iframe的方法:
<action name="remove_iframe" type="Javascript"><![CDATA[
var lastIframe = document.getElementById('iframelayer');
lastIframe.parentNode.removeChild(lastIframe);
]]></action>