krpano教程 - krpano中嵌入html頁面，實現點擊彈出html網頁iframe窗口
這是krpano 1.19 版本之後的新擴展，就是可將html頁面（iframe）作爲熱點放到3D空間中。你可以如封面那樣放入一個youku的embed視頻，或者像下圖那樣直接放入一個html頁面。因爲這個就是一個可以變形的iframe。要做到這種效果，需要哪些條件呢？
基礎代碼：
首先你必須使用krpano 1.19，目前最新版本的是krpano 1.19 pr6。儘管這個是一個預覽版，但據klaus所說，這個預覽版已經相當穩定，之所以不出正式版，正應了那句話：萬事俱備只欠東風。
其次你必須在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.anjiaotong.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渲染下。
當然使用layer元素也是可以的。
<layer name="iframelayer"
url="black.png"
align="center"
onloaded="delayedcall(0,add_iframe('http://www.nongyejing.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>
進階代碼之一：
- 實現動態更新iframe內容。
- 點擊文字按鈕打開網頁。
- 點擊右上角關閉按鈕關閉網頁。
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.anjiaotong.com/')
"/>
<layer name="button_2" style="buttonstyle" x="-250" html="農業經網" onclick="
call_iframe('http://www.nongyejing.com/')"/>
<layer name="button_3" style="buttonstyle" x="250" html="百度" onclick="
call_iframe('http://www.baldu.co/')"/>
<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="true"屬性，正常要爲iframelayer這個layer增加
以下部分是載入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.peoplenews.org/')
非常簡單，直接替換裏面的網址換成你的網址即可。
進階代碼之二：
- 這個代碼是通過textfiled插件實現的。
- 點擊文字按鈕打開網頁。
- 點擊右上角關閉按鈕關閉網頁。
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="ruanally首頁" onclick="
iframe_embed(iframesrc,iframelayer,'http://www.ruanally.com/');
"/>
<layer name="button_2" style="buttonstyle" x="-250" html="zhuanfang.org" onclick="
iframe_embed(iframesrc,iframelayer,'http://www.zhuanfang.org');"/>
<layer name="button_3" style="buttonstyle" x="250" html="農業經" onclick="
iframe_embed(iframesrc,iframelayer,'http://www.nongyejing.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=“true”屬性，正常要爲iframelayer這個layer增加
以下部分是載入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.vkbang.com/');
直接替換裏面的網址換成你的網址即可。
第一個參數裏iframesrc是要新建layer的name，iframelayer是第一個參數中新建layer指定的父元素，就是說iframesrc是iframelayer的子元素。
案例參考：91拓客
