1. 首页
  2. 文章中心
  3. KRpano+全景VR

Krpano中嵌入html页面

83 阅读 0 评论
我是靠谱客的博主 眯眯眼蚂蚁，最近开发中收集的这篇文章主要介绍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的图片。

<hotspot name="iframelayer"
         url="black.png"
         ath="0" atv="0"
         distorted="true"
         renderer="css3d"
         onloaded="delayedcall(0,add_iframe('https://www.youtube.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渲染下。

renderer="css3d"

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

<layer   name="iframelayer"
         url="black.png"
         align="center"
         onloaded="delayedcall(0,add_iframe('http://www.baidu.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>

 

进阶代码之一：

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

demo完整代码

<krpano>
	
	
	
		<control mousetype="drag2d" />
		
		<preview type="grid();" />
		
		<layer   name="iframelayer"
		         url="black.png"
                 align="center"
		         width="100%"
		         height="100%"
		         zorder="10"
                 visible="false"
		         >
 
 
		<layer name="closeiframe_button" url="closebutton.png" align="righttop" zorder="99" x="15" y="10" onclick="
		        remove_iframe();
        set(layer[iframelayer].visible,false);"/>         
 
		</layer> 
 
 
		<layer name="button_1" style="buttonstyle" x="0" html="腾讯首页" onclick="
		call_iframe('http://www.qq.com/')
		"/>
 
		<layer name="button_2" style="buttonstyle" x="-250" html="网易" onclick="
		call_iframe('http://www.163.com/')"/>
 
		<layer name="button_3" style="buttonstyle" x="250" html="百度" onclick="
		call_iframe('http://www.baidu.com/')"/>
 
 
		<style name="buttonstyle"  keep="true" url="%SWFPATH%/plugins/textfield.swf" children="false" enabled="true" align="bottom" y="50"  width="200" height="36" vcenter="true"
		           border="false" background="true"  backgroundcolor="0x000000" backgroundalpha="0.7" roundedge="5"
			       css="text-align:center; color:#FFFFFF; font-family:Arial; font-weight:bold; font-size:18px;" zorder="1" 
			        onout="set(shadow,0);if(layer[bar].state != name,stoptween(layer[bar].x);tween(layer[bar].x,get(layer[get(layer[bar].state)].x),0.5))" 			        
			        />	
 
		<action name="call_iframe">
 
      
		callwith(layer[iframelayer],add_iframe(%1, 100%, 100%);set(visible,true));
		
 
		</action>	        
 
	
		<action name="add_iframe" type="Javascript"><![CDATA[
				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>
 
 
		<action name="remove_iframe" type="Javascript"><![CDATA[
		 
		 var lastIframe = document.getElementById('iframelayer');
		 lastIframe.parentNode.removeChild(lastIframe);
 
		]]></action>
	
 
	
</krpano>

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


以下部分是载入iframe用的iframelayer以及对应的关闭按钮部分。
放在scene的外面

<layer   name="iframelayer"
		         url="black.png"
                         align="center"
		         width="100%"
		         height="100%"
		         zorder="10"
                         visible="false"
                         keep="true"
		         >
 
		<layer name="closeiframe_button" url="closebutton.png" align="righttop" zorder="99" x="15" y="10" onclick="
		        remove_iframe();set(layer[iframelayer].visible,false);"/>         
		</layer>

关闭按钮closeiframe_button的url、align、x、y可自行修改。
注意，你需要准备一张纯黑色的jpg或png图片。几k的体积就可以了。


以下部分是实现嵌入网页的action。
放在scene的外面

<action name="call_iframe">      
		callwith(layer[iframelayer],add_iframe(%1, 100%, 100%);set(visible,true));		
		</action>	        
 
	
		<action name="add_iframe" type="Javascript"><![CDATA[
				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>
 
 
		<action name="remove_iframe" type="Javascript"><![CDATA[
		 
		 var lastIframe = document.getElementById('iframelayer');
		 lastIframe.parentNode.removeChild(lastIframe);
 
		]]></action>

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

call_iframe('http://www.baidu.com/')

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

 

进阶代码之二：

  1. 这个代码是通过textfiled插件实现的。
  2. 点击文字按钮打开网页。
  3. 点击右上角关闭按钮关闭网页。

demo完整代码:

<krpano>
	
		<!-- use drag2d control, because mouse-releases OVER the iframe can't be detected -->
		<control mousetype="drag2d" />
		
		<preview type="grid();" />
		
		<layer   name="iframelayer"
		         type="container"
		         width="100%"
		         height="100%"
		         align="center"
                 zorder="10" 
                 bgcolor="0xffffff"
                 bgalpha="1"
                 visible="false"
		         >
 
		<layer name="closeiframe_button" url="closebutton.png" align="righttop" zorder="99" x="15" y="10" onclick="set(layer[iframelayer].visible,false);"/>         
 
		</layer> 
 
 
		<layer name="button_1" style="buttonstyle" x="0" html="腾讯首页" onclick="
		iframe_embed(iframesrc,iframelayer,'http://www.qq.com/');
		"/>
 
		<layer name="button_2" style="buttonstyle" x="-250" html="163.com" onclick="
		iframe_embed(iframesrc,iframelayer,'http://www.163.com/');"/>
 
		<layer name="button_3" style="buttonstyle" x="250" html="百度首页" onclick="
		iframe_embed(iframesrc,iframelayer,'http://www.baidu.com/');"/>
 
 
		<style name="buttonstyle"  keep="true" url="%SWFPATH%/plugins/textfield.swf" children="false" enabled="true" align="bottom" y="50"  width="200" height="36" vcenter="true"
		           border="false" background="true"  backgroundcolor="0x000000" backgroundalpha="0.7" roundedge="5"
			       css="text-align:center; color:#FFFFFF; font-family:Arial; font-weight:bold; font-size:18px;" zorder="1" 
			        onout="set(shadow,0);if(layer[bar].state != name,stoptween(layer[bar].x);tween(layer[bar].x,get(layer[get(layer[bar].state)].x),0.5))" 			        
			        />	
 
		<action name="iframe_embed">
		    removelayer(%1);
		    addlayer(%1);
		    set(layer[%1].parent, %2);
		    set(layer[%1].align, lefttop);
		    set(layer[%1].width, 100%);
		    set(layer[%1].height, 100%);
 
		    if(device.html5,
		        txtadd(iframecode, '[div style="position:absolute; right:0; bottom:0; left:0; top:0; overflow-y: scroll; -webkit-overflow-scrolling:touch;"][iframe  id="krpano_iframe_',%1,'" width="100%" height="100%" src="',%3,'" frameborder="0" allow-same-origin allowfullscreen][/iframe][/div]');
		        copy(layer[%1].html, iframecode);
		        set(layer[%1].padding, 0);
		        set(layer[%1].url, 'textfield.swf');
		        set(layer[%1].interactivecontent, true);
		        set(layer[%1].onloaded, iframe_resize(%1); );
		        set(layer[%2].visible,true);
		    ,
		        showlog();
		        trace(error,'iframe无法在Flash下运行!');
		    );
		</action>
 
		<action name="iframe_resize" type="Javascript" devices="html5"><![CDATA[
		    document.querySelector("#krpano_iframe_"+args[1]).parentNode.style.height="100%";
		]]></action>
	        	
</krpano>

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

以下部分是载入iframe用的iframelayer以及对应的关闭按钮部分。
放在scene的外面

<layer   name="iframelayer"
		         type="container"
		         width="100%"
		         height="100%"
		         align="center"
                         zorder="10" 
                         bgcolor="0xffffff"
                         bgalpha="1"
                         visible="false"
		         >
 
		<layer name="closeiframe_button" url="closebutton.png" align="righttop" zorder="99" x="15" y="10" onclick="set(layer[iframelayer].visible,false);"/>         
 
		</layer>

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

以下部分是实现嵌入网页的action。
放在scene的外面

<action name="iframe_embed">
		    removelayer(%1);
		    addlayer(%1);
		    set(layer[%1].parent, %2);
		    set(layer[%1].align, lefttop);
		    set(layer[%1].width, 100%);
		    set(layer[%1].height, 100%);
 
		    if(device.html5,
		        txtadd(iframecode, '[div style="position:absolute; right:0; bottom:0; left:0; top:0; overflow-y: scroll; -webkit-overflow-scrolling:touch;"] [iframe id="krpano_iframe_',%1,'" width="100%" height="100%" src="',%3,'" frameborder="0" scrolling="yes" allow-same-origin allowfullscreen][/iframe][/div]');
		        copy(layer[%1].html, iframecode);
		        set(layer[%1].padding, 0);
		        set(layer[%1].url, 'textfield.swf');
		        set(layer[%1].interactivecontent, true);
		        set(layer[%1].onloaded, iframe_resize(%1); );
		        set(layer[%2].visible,true);
		    ,
		        showlog();
		        trace(error,'iframe无法在Flash下运行!');
		    );
		</action>
 
		<action name="iframe_resize" type="Javascript" devices="html5"><![CDATA[
		    document.querySelector("#krpano_iframe_"+args[1]).parentNode.style.height="100%";
		]]></action>

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


iframe_embed(iframesrc,iframelayer,'http://www.qq.com/');

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

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

 

 

 

 

最后

以上就是眯眯眼蚂蚁为你收集整理的Krpano中嵌入html页面的全部内容，希望文章能够帮你解决Krpano中嵌入html页面所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(55)

相关文章

HTML5：网页如何播放VR视频？VR视频和普通视频有什么区别？VR视频的播放原理？网页如何播放VR视频？
HTML5：网页如何播放VR视频？VR视频和普通视频有什么区别？VR视频的播放原理？网页如何播放VR视频？
HTML 几个通用基本语法.
HTML 几个通用基本语法.
krpano 在手机加载的时候自动的打开webvr
krpano 在手机加载的时候自动的打开webvr
krpano 全景图在微信里面被屏蔽的解决办法
krpano 全景图在微信里面被屏蔽的解决办法
Krpano中嵌入html页面
Krpano中嵌入html页面
krpano使用陀螺仪
krpano使用陀螺仪
获取CGContextRef的几种方法
获取CGContextRef的几种方法
解决Safari在线观看视频卡顿的问题
解决Safari在线观看视频卡顿的问题

评论列表共有 0 条评论

立即
投稿
返回
顶部