Krpano中嵌入html页面

140 阅读 0 评论 93 点赞

我是靠谱客的博主眯眯眼蚂蚁，这篇文章主要介绍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的图片。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<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渲染下。

复制代码

1
renderer="css3d"

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

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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的方法：

复制代码

1
2
3
4
5
6
7

<action name="remove_iframe" type="Javascript"><![CDATA[
 
 var lastIframe = document.getElementById('iframelayer');
 lastIframe.parentNode.removeChild(lastIframe);
 
]]></action>

进阶代码之一：

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

demo完整代码

复制代码

<krpano>
	
	
	
		<control mousetype="drag2d" ></control>
		
		<preview type="grid();" ></preview>
		
		<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> 
 
 
		<layer name="button_1" style="buttonstyle" x="0" html="腾讯首页" onclick="
		call_iframe('http://www.qq.com/')
		"></layer>
 
		<layer name="button_2" style="buttonstyle" x="-250" html="网易" onclick="
		call_iframe('http://www.163.com/')"></layer>
 
		<layer name="button_3" style="buttonstyle" x="250" html="百度" onclick="
		call_iframe('http://www.baidu.com/')"></layer>
 
 
		<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))" 			        
			        ></style>	
 
		<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<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的外面

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
<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的外面

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<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等。

复制代码

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

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

进阶代码之二：

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

demo完整代码:

复制代码

<krpano>
	
		
		<control mousetype="drag2d" ></control>
		
		<preview type="grid();" ></preview>
		
		<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> 
 
 
		<layer name="button_1" style="buttonstyle" x="0" html="腾讯首页" onclick="
		iframe_embed(iframesrc,iframelayer,'http://www.qq.com/');
		"></layer>
 
		<layer name="button_2" style="buttonstyle" x="-250" html="163.com" onclick="
		iframe_embed(iframesrc,iframelayer,'http://www.163.com/');"></layer>
 
		<layer name="button_3" style="buttonstyle" x="250" html="百度首页" onclick="
		iframe_embed(iframesrc,iframelayer,'http://www.baidu.com/');"></layer>
 
 
		<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))" 			        
			        ></style>	
 
		<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<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的外面

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<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等。

复制代码

1
2

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

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

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

最后

以上就是眯眯眼蚂蚁最近收集整理的关于Krpano中嵌入html页面的全部内容，更多相关Krpano中嵌入html页面内容请搜索靠谱客的其他文章。

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

本文分类：KRpano+全景VR
浏览次数：140 次浏览
发布日期：2024-01-14 14:40:25
本文链接：https://www.kaopuke.com/article/k-p-k_13_u_23_ogf3_14__23__26_z.html

Krpano中嵌入html页面

基础代码：

进阶代码之一：

进阶代码之二：

最后

评论列表共有 0 条评论

发表评论取消回复

Krpano中嵌入html页面

基础代码：

进阶代码之一：

进阶代码之二：

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

微信扫一扫：分享

发表评论取消回复