krpano 生成iframe弹窗，弹窗控制父框跳转

最新推荐文章于 2024-04-16 17:01:44 发布

我在天堂抽烟

最新推荐文章于 2024-04-16 17:01:44 发布

阅读量869

点赞数 1

分类专栏： krpano iframe 文章标签： html5

本文链接：https://blog.csdn.net/qiang928/article/details/120132823

版权

krpano 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

iframe

1 篇文章 0 订阅

订阅专栏

1、下载krpano

2、选择全景图片拖动到

3、生成vtour文件夹

启动双击tour_testingserver.exe 。

3、把tour.html修改为index.html,修改index.html中的代码

<script>
		embedpano({swf:"tour.swf", xml:"tour.xml", target:"pano", consolelog : true,html5:"auto", mobilescale:1.0, passQueryParameters:true,onready: krpano_onready_callback});
	function krpano_onready_callback(krpano_interface) {
        krpano = krpano_interface;
      }
      function loadpano(xmlname, sceneName) {
        if (krpano) {
          //动态切换xml，xmlname为tour.xml传过来的值
          krpano.call("loadpano(" + xmlname + ", null, IGNOREKEEP, BLEND(1));");
          //sceneName为切换后加载的第一个场景
          krpano.call("loadscene('" + sceneName + "')");
        }
      }
	</script>

4、在plugins中新建iframe.xml。注意图片路径。一个背景色图片，一个关闭图片

<krpano>
		<control mousetype="drag2d" />	
		<preview type="grid();" />
		
		<layer   name="iframelayer"
		         url="%SWFPATH%/images/dz_JDList.png"
                 align="center"
		         width="80%"
		         height="80%"
		         zorder="10"
                 visible="false"
				 keep="true"
		         >
 
		<layer name="closeiframe_button" url="%SWFPATH%/skin/close.png" align="righttop" zorder="99" x="15" y="10" onclick="
		        remove_iframe();
        set(layer[iframelayer].visible,false);"/>         
 
		</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))" 			        
			        />	
 
		<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>

5、在tour.xml中导入iframe.xml

<include url="plugins/iframe.xml" />

6、在skin/vtourskin.xml添加。注意图片路径。

<!--缩略图-->
<layer name="skin_control_help" 
keep="true" 
url="dz_swithcJD.png" 
align="rightbottom" 
autoalpha="true"
scale="0.5" 
x="10" y="120" 
onclick="call_iframe('list.html')" />

7、新建list.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<div style="padding-top:40px;">
<a href="index.html" target="_top">风景1</a>
<a href="javascript:" onClick="loadpano()">风景2</a>
</div>
<script language="JavaScript">
function loadpano(xmlname, sceneName) {
	//alert(1);
	window.parent.loadpano('tour1.xml','scene_1');
	//parent.window.location.href='tour1.html';
}
</script>
</body>

</html>

8、demo