文章目录

krpano 1.20.11以后版本支持直接将layer里放iframe，因此本教程仅针对1.21.10及之前的版本的做法。

krpano 1.19之后的新技能，就是可将html页面（iframe）作为热点放到3D空间中。

你可以如封面那样放入一个youku的embed视频，或者像下图那样直接放入一个html页面。因为这个就是一个可以变形的iframe。

krpano 1.20.11之后，代码变得非常简单，

<layer name="html"
       type="iframe"
       iframeurl="https://krpano.com/home/"
       align="center" width="800" height="600"
       keep="true"
       />

<layer name="html"

type="iframe"

iframeurl="https://krpano.com/home/"

align="center" width="800" height="600"

keep="true"

这里注意两点，第一type属性要写iframe，第二iframeurl写上要嵌入的网页路径。

要做到这种效果，需要什么条件呢？

基础代码

本教程仅针对1.21.10及之前的版本的做法。

你必须在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.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 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));"

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"

1	renderer="css3d"

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

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

<layer name="iframelayer"

url="black.png"

align="center"

onloaded="delayedcall(0,add_iframe('http://www.krpano360.com/', 640, 360));"

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>

<action name="remove_iframe" type="Javascript"><![CDATA[

var lastIframe = document.getElementById('iframelayer');

lastIframe.parentNode.removeChild(lastIframe);

]]></action>

进阶代码之一

这个代码出现在1.20的下载包中，路径是

你电脑的路径\krpano-1.20.9\viewer\examples\postprocessing\popup_blur.xml

在你自己的xml里放入下面代码

	<action name="popup" scope="private:POPUP" args="type, content, width, height, scrollbars"><![CDATA[
		if(popup, break(); );
		
		addlayer('popup_bg', popup_bg);
		set(popup_bg,
			type=container,
			align=lefttop, width=100%, height=100%,
			zorder=99,
			handcursor=false,
			bgcapture=true,
			capture=false,
			//bgcolor=0x123456, onloaded='tween(bgalpha,0.3,1.0);',	// optional: colorize the background
			ondown='popup_close()'
		);
			
		
		addlayer('popup', popup);
		set(popup,
			type=container,
			parent='popup_bg',
			width=calc(min(width,global.stagewidth*0.9)),
			height=calc(min(height,global.stageheight*0.8)),
			align=center,
			bgborder='1 0x555555 1',
			bgcolor=0x555555,
			bgalpha=0.7,
			bgshadow='0 10 20 0x000000 0.5',
			bgcapture=true,
			maskchildren=false,
			capture=true,
			handcursor=false,
			alpha=0
		);
		
		
		addlayer('popup_close_x', closex);
		set(closex,
			url='%CURRENTXML%/closex.png',
			parent='popup',
			align=righttop,
			edge=center,
			scale=0.5,
			zorder=99,
			alpha=0.25,
			onover='tween(alpha,1)',
			onout='tween(alpha,0.25)',
			ondown='tween(alpha,1)',
			onup='tween(alpha,0.25)',
			onclick='popup_close()'
		);
		

		if(type == 'html',
			copy(popup.datacontent, content);
			calc(popup.onloaded, 'add_html_code(get(datacontent),'+scrollbars+');');

		  ,type == 'iframe',
			calc(popup.datacontent, '<iframe style="position:absolute;width:100%;height:100%;top:0px;left:0px;" src="'+content+'" frameborder="0" allowfullscreen></iframe>');
			calc(popup.onloaded, 'add_html_code(get(datacontent),'+scrollbars+');');

		  ,type == 'image',
		 	set(popup,
		 		bgcolor=0xFFFFFF,
		 		bgalpha=1,
		 	);
			addlayer("popup_image", img);
			set(img,
				url=get(content),
				align=center,
				width=-20, height=-20,
				parent=get(popup.name),
				onloaded='popup_imageloaded()'
			);
		);

		tween(global.plugin[pp_blur].range, 40.0);
		delayedcall(0.2, tween(global.layer[popup].alpha, 1.0); );

		set(global.events[popup].onclick, popup_close() );
		set(global.events[popup].onremovepano, popup_close() );
	]]></action>
	
	
	<action name="popup_close">
		set(global.plugin[popup_bg].enabled, false);
		set(global.events[popup].name, null);
		tween(global.plugin[pp_blur].range, 0.0);
		tween(global.layer[popup_bg].bgalpha, 0.0, 0.25);
		tween(global.layer[popup].alpha, 0.0, 0.25, default,
			removelayer('popup_bg', true);
			scope(private:POPUP, delete(popup); );
		);
	</action>


	<action name="popup_imageloaded" scope="private:POPUP">
		calc(imgw, caller.imagewidth + 20);
		calc(imgh, caller.imageheight + 20);
		calc(maxw, global.stagewidth*0.9);
		calc(maxh, global.stageheight*0.8);
		if(imgw GT maxw,
			calc(imgh, round(imgh * maxw / imgw));
			copy(imgw, maxw);
		);
		if(imgh GT maxh,
			calc(imgw, round(imgw * maxh / imgh));
			copy(imgh, maxh);
		);

		set(global.layer[get(caller.parent)], width=get(imgw), height=get(imgh) );
	</action>



	<!-- arguments: 1=htmlcode, 2=scrollbars -->
	<action name="add_html_code" type="Javascript"><![CDATA[
		var div = document.createElement("div");

		// basic styles to fit into the layer size and allow scrolling:
		div.style.width = "100%";
		div.style.height = "100%";
		div.style.boxSizing = "border-box";
		div.style.overflow = args[2] == "true" ? "auto" : "hidden";

		// allow text selection (optional):
		div.style.webkitUserSelect =
		div.style.MozUserSelect =
		div.style.msUserSelect =
		div.style.userSelect = "text";

		function stopPropagation(e){ e.stopPropagation(); }
		function preventDefault(e){ e.preventDefault(); }

		// enable browsed-based mouse-wheel and touch-scrolling support:
		div.addEventListener("wheel", stopPropagation, true);
		div.addEventListener("mousewheel", stopPropagation, true);
		div.addEventListener("DOMMouseScroll", stopPropagation, true);
		div.addEventListener("touchstart", function(event){ if(krpano.device.ios && window.innerHeight == krpano.display.htmltarget.offsetHeight){ /* avoid the iOS 'overscrolling' for fullpage viewers */ var bs = document.body.parentNode.style; bs.position="fixed"; bs.top=0; bs.left=0; bs.right=0; bs.bottom=0; } krpano.control.preventTouchEvents = false; event.stopPropagation(); }, true);
		div.addEventListener("touchend", function(event){ krpano.control.preventTouchEvents = true; event.stopPropagation(); }, true);
		div.addEventListener("gesturestart", preventDefault, true);

		// add the html code:
		div.innerHTML = args[1];

		// add the div to the layer element:
		caller.sprite.appendChild(div);
	]]></action>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

<action name="popup" scope="private:POPUP" args="type, content, width, height, scrollbars"><![CDATA[

if(popup, break(); );

addlayer('popup_bg', popup_bg);

set(popup_bg,

type=container,

align=lefttop, width=100%, height=100%,

zorder=99,

handcursor=false,

bgcapture=true,

capture=false,

//bgcolor=0x123456, onloaded='tween(bgalpha,0.3,1.0);', // optional: colorize the background

ondown='popup_close()'

);

addlayer('popup', popup);

set(popup,

type=container,

parent='popup_bg',

width=calc(min(width,global.stagewidth*0.9)),

height=calc(min(height,global.stageheight*0.8)),

align=center,

bgborder='1 0x555555 1',

bgcolor=0x555555,

bgalpha=0.7,

bgshadow='0 10 20 0x000000 0.5',

bgcapture=true,

maskchildren=false,

capture=true,

handcursor=false,

alpha=0

);

addlayer('popup_close_x', closex);

set(closex,

url='%CURRENTXML%/closex.png',

parent='popup',

align=righttop,

edge=center,

scale=0.5,

zorder=99,

alpha=0.25,

onover='tween(alpha,1)',

onout='tween(alpha,0.25)',

ondown='tween(alpha,1)',

onup='tween(alpha,0.25)',

onclick='popup_close()'

);

if(type == 'html',

copy(popup.datacontent, content);

calc(popup.onloaded, 'add_html_code(get(datacontent),'+scrollbars+');');

,type == 'iframe',

calc(popup.datacontent, '<iframe style="position:absolute;width:100%;height:100%;top:0px;left:0px;" src="'+content+'" frameborder="0" allowfullscreen></iframe>');

calc(popup.onloaded, 'add_html_code(get(datacontent),'+scrollbars+');');

,type == 'image',

set(popup,

bgcolor=0xFFFFFF,

bgalpha=1,

);

addlayer("popup_image", img);

set(img,

url=get(content),

align=center,

width=-20, height=-20,

parent=get(popup.name),

onloaded='popup_imageloaded()'

);

tween(global.plugin[pp_blur].range, 40.0);

delayedcall(0.2, tween(global.layer[popup].alpha, 1.0); );

set(global.events[popup].onclick, popup_close() );

set(global.events[popup].onremovepano, popup_close() );

]]></action>

set(global.plugin[popup_bg].enabled, false);

set(global.events[popup].name, null);

tween(global.plugin[pp_blur].range, 0.0);

tween(global.layer[popup_bg].bgalpha, 0.0, 0.25);

tween(global.layer[popup].alpha, 0.0, 0.25, default,

removelayer('popup_bg', true);

scope(private:POPUP, delete(popup); );

);

</action>

calc(imgw, caller.imagewidth + 20);

calc(imgh, caller.imageheight + 20);

calc(maxw, global.stagewidth*0.9);

calc(maxh, global.stageheight*0.8);

if(imgw GT maxw,

calc(imgh, round(imgh * maxw / imgw));

copy(imgw, maxw);

);

if(imgh GT maxh,

calc(imgw, round(imgw * maxh / imgh));

copy(imgh, maxh);

);

set(global.layer[get(caller.parent)], width=get(imgw), height=get(imgh) );

</action>

<action name="add_html_code" type="Javascript"><![CDATA[

var div = document.createElement("div");

// basic styles to fit into the layer size and allow scrolling:

div.style.width = "100%";

div.style.height = "100%";

div.style.boxSizing = "border-box";

div.style.overflow = args[2] == "true" ? "auto" : "hidden";

// allow text selection (optional):

div.style.webkitUserSelect =

div.style.MozUserSelect =

div.style.msUserSelect =

div.style.userSelect = "text";

function stopPropagation(e){ e.stopPropagation(); }

function preventDefault(e){ e.preventDefault(); }

// enable browsed-based mouse-wheel and touch-scrolling support:

div.addEventListener("wheel", stopPropagation, true);

div.addEventListener("mousewheel", stopPropagation, true);

div.addEventListener("DOMMouseScroll", stopPropagation, true);

div.addEventListener("touchstart", function(event){ if(krpano.device.ios && window.innerHeight == krpano.display.htmltarget.offsetHeight){ /* avoid the iOS 'overscrolling' for fullpage viewers */ var bs = document.body.parentNode.style; bs.position="fixed"; bs.top=0; bs.left=0; bs.right=0; bs.bottom=0; } krpano.control.preventTouchEvents = false; event.stopPropagation(); }, true);

div.addEventListener("touchend", function(event){ krpano.control.preventTouchEvents = true; event.stopPropagation(); }, true);

div.addEventListener("gesturestart", preventDefault, true);

// add the html code:

div.innerHTML = args[1];

// add the div to the layer element:

caller.sprite.appendChild(div);

]]></action>

注意这里使用了一个关闭按钮，即close.png，设置在打开窗口的右上角，你可以设置自己的图片。

需要弹出html页面时，即使用popup这个动作，popup这个动作不仅实现了弹出html页面，还可以弹出html代码内容以及弹出图片。

弹出html页面：

popup('iframe', 'https://krpano.com/forum/', 800, 600, true);

1	popup('iframe', 'https://krpano.com/forum/', 800, 600, true);

这里一共五个参数，第一个参数代表了弹出的内容，如果是html页面，即写’iframe’，第二个参数即要打开的地址，第三个第四个是弹出窗口的宽度和高度，第五个是是否有滚动条。

对于弹出的窗口本身的设置，可以在之前嵌入的（黄色高亮）代码中找到。

                width=calc(min(width,global.stagewidth*0.9)),
	        height=calc(min(height,global.stageheight*0.8)),
	        align=center,
	        bgborder='1 0x555555 1',
	        bgcolor=0x555555,
	        bgalpha=0.7,
	        bgshadow='0 10 20 0x000000 0.5',
	        bgcapture=true,

width=calc(min(width,global.stagewidth*0.9)),

height=calc(min(height,global.stageheight*0.8)),

align=center,

bgborder='1 0x555555 1',

bgcolor=0x555555,

bgalpha=0.7,

bgshadow='0 10 20 0x000000 0.5',

bgcapture=true,

可设置背景、边框等等。

如果需要弹出htm内容：

popup('html', get(data[data_html_example].content), 600, 300, true);

1	popup('html', get(data[data_html_example].content), 600, 300, true);

‘html’代表的是html内容，那内容就是name为data_html_example的data元素，也即是第二个参数。

如果需要弹出图片

popup('image', '%CURRENTXML%/garden_f.jpg');

1	popup('image', '%CURRENTXML%/garden_f.jpg');

弹出图片的话只需要两个参数，第一个参数是’image’，第二个参数是该图片的路径，动作会根据该图片的尺寸自动调整背景层的大小。

进阶代码之二

实现动态更新iframe内容。

点击文字按钮打开网页。

点击右上角关闭按钮关闭网页。

demo完整代码（可在窗口中点击鼠标右键 – 点击 fullscreen全屏）

<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="krpano中文网" onclick="
		call_iframe('http://www.krpano.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>

<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="krpano中文网" onclick="

call_iframe('http://www.krpano.com/')"/>

<layer name="button_3" style="buttonstyle" x="250" html="百度" onclick="

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

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

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>

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

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	call_iframe('http://www.baidu.com/')

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

进阶代码之三

这个代码是通过textfiled插件实现的。

点击文字按钮打开网页。

点击右上角关闭按钮关闭网页。

demo完整代码（可在窗口中点击鼠标右键 – 点击 fullscreen全屏）

<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="krpano360.com" onclick="
		iframe_embed(iframesrc,iframelayer,'http://www.krpano360.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>

<layer name="iframelayer"

type="container"

width="100%"

height="100%"

align="center"

zorder="10"

bgcolor="0xffffff"

bgalpha="1"

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="krpano360.com" onclick="

iframe_embed(iframesrc,iframelayer,'http://www.krpano360.com/');"/>

<layer name="button_3" style="buttonstyle" x="250" html="百度首页" onclick="

iframe_embed(iframesrc,iframelayer,'http://www.baidu.com/');"/>

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

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>

<layer name="iframelayer"

type="container"

width="100%"

height="100%"

align="center"

zorder="10"

bgcolor="0xffffff"

bgalpha="1"

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>

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/');

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

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

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