html iframe embed directly from tour xml

Sudarchikov Andrey · April 4, 2017 at 2:41 PM

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

Code

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

Display More

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

Andrey

Sergey74 · April 8, 2017 at 3:22 PM

Excellent solution!

andrew22222 · April 21, 2017 at 6:24 AM

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 · April 25, 2017 at 3:13 AM

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

HansP · May 4, 2017 at 12:00 PM

Quote from andrew22222

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

Quote from Sudarchikov Andrey

sure it should work.

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

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

Ruben

HansP · May 4, 2017 at 2:40 PM

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>

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

Best regards

sblack · July 5, 2017 at 4:12 PM

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

sblack · July 5, 2017 at 4:45 PM

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

mnel · August 30, 2017 at 2:46 AM

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.

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

mnel · August 30, 2017 at 2:49 AM

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

San7 · September 7, 2017 at 9:49 AM

Perfect solution! Thank you!

Fernando · March 16, 2018 at 1:25 PM

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.

Participate now!