krpano教程 - krpano中嵌入html页面，实现点击弹出html网页iframe窗口

 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>