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的图片。

    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";

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

renderer="css3d"

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

 

	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";

移除iframe的方法：

 

进阶代码之一：

1. 实现动态更新iframe内容。
2. 点击文字按钮打开网页。
3. 点击右上角关闭按钮关闭网页。

demo完整代码