You are not logged in.

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

  • "Sudarchikov Andrey" started this thread

Posts: 1,081

Location: Russia, Kaliningrad

  • Send private message

1

Tuesday, April 4th 2017, 2:41pm

html iframe embed directly from tour xml

Hi!
just want to share simple action code to embed iframe html with any src to your tour:

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<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, '[iframe  id="krpano_iframe_',%1,'" width="100%" height="100%" src="',%3,'" frameborder="0" allow-same-origin allowfullscreen][/iframe]');
        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); );
    ,
        showlog();
        trace(error,'Iframe is not working in flash mode!');
    );
</action>

<action name="iframe_resize" type="Javascript" devices="html5"><![CDATA[
    document.querySelector("#krpano_iframe_"+args[1]).parentNode.style.height="100%";
]]></action>



Usage:

iframe_embed(IFRAME_LAYER_NAME, TARGET_LAYER_NAME, IFRAME_SRC_URL );

action will add regular krpano layer with name IFRAME_LAYER_NAME as a child to parent layer TARGET_LAYER_NAME
Working in HTML5 only (no flash) the size of iframe will be same as a parent layer, it's possible to set size in %
iframe element has 100% width and height attributes so you can change parent layer size normally

Enjoy *thumbup*

Andrey
VRAP - desktop VR content player based on krpano.
Common tasks in one place in one click! Discussion thread
DOWNLOAD for MAC
DOWNLOAD for WIN

Sergey74

Trainee

Posts: 128

Location: Russia, Chelyabinsk

Occupation: professional noob

  • Send private message

2

Saturday, April 8th 2017, 3:22pm

Excellent solution! *thumbup*
translation difficulties *huh*

andrew22222

Intermediate

Posts: 341

Location: Australia

  • Send private message

3

Friday, April 21st 2017, 6:24am

Hi Andrey.

Does this iframe code you created allow for the contents to be scrolled up and down on an iPad / iPhone? If you have a version online I can test it ;-)

  • "Sudarchikov Andrey" started this thread

Posts: 1,081

Location: Russia, Kaliningrad

  • Send private message

4

Tuesday, April 25th 2017, 3:13am

Hi!
sure it should work.
But i didn't tested it on device.
i have tested it on desktop browser only with window size changing.

Andrey *thumbup*
VRAP - desktop VR content player based on krpano.
Common tasks in one place in one click! Discussion thread
DOWNLOAD for MAC
DOWNLOAD for WIN

5

Thursday, May 4th 2017, 12:00pm

Does this iframe code you created allow for the contents to be scrolled up and down on an iPad / iPhone? If you have a version online I can test it

sure it should work.

No, unfortunately it doesn't. I've tested it.

So there is still no solution for this issue? any kind? *sad*
maybe in the html of the iframe content?

Ruben

6

Thursday, May 4th 2017, 2:40pm

I got the solution:


<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, '%SWFPATH%/plugins/textfield.swf');
set(layer[%1].interactivecontent, true);
set(layer[%1].onloaded, iframe_resize(%1); );
,
showlog();
trace(error,'Iframe is not working in flash mode!');
);

</action>

<action name="iframe_resize" type="Javascript" devices="html5">
<![CDATA[
document.querySelector("#krpano_iframe_"+args[1]).parentNode.style.height="100%";
]]>
</action>

Just add the div to the iframecode and you are good to go and scroll on iOs. :)

Best regards

7

Wednesday, July 5th 2017, 4:12pm

hi Andrey
very useful
is there any way to make background of iframe transparent?

8

Wednesday, July 5th 2017, 4:45pm

done
background="false" for layer
allowtransparency="true" for <iframe>
body { background: none transparent; } for iframe page

9

Wednesday, August 30th 2017, 2:46am

Great code, but is there any way to close/open this iframe?

I can close it with the below code

set(layer[%1].visible, false);

set(layer[%2].visible, false);


But when I try to re-open it in the iframe_embed action with the below code it wont open.

<action name="iframe_embed">

set(layer[%1].visible, true);
set(layer[%2].visible, true);

10

Wednesday, August 30th 2017, 2:49am

I got it. only make visible true/false for %1. Do not touch parent and it works fine. *smile*

11

Thursday, September 7th 2017, 9:49am

Perfect solution! Thank you!
*thumbsup* *thumbsup* *thumbsup*

publicitarios360

Intermediate

Posts: 205

Location: Habana, Cuba

Occupation: Architect, Photographer, Programmer.

  • Send private message

12

Friday, March 16th 2018, 1:25pm

how to send code from iframe to parent?

Hi Andrey, thanks for you code is perfect!!! I need to known how to send code from iframe to parent. This solution allow a html visual menu.

Best Regards,

Fernando.