Php photo gallery TWG | JFUploader | TWG Flash upload | WFU | Forum
https://www.tinywebgallery.com/forum/

use the same iframe Page on different parent pages
https://www.tinywebgallery.com/forum/viewtopic.php?f=21&t=4029
Page 1 of 4

Author:  pferdetermine [ 4. Feb 2016, 14:13 ]
Post subject:  use the same iframe Page on different parent pages

Hi,
I want to display the same iframe-page on different websites on a parent page (all WordPress sites). I am using the external workaround and the pro version. The content of the iframe page changes, depending on an url-parameter ("*iframe=NAME"). But how can I define the src-url in the script for the iframe-page from the parent page? I do not want to build one page per parent site.....

Here is my example in more detail: I'm trying to use the same iframe-Page (http://pferdetermine.de/kurs-termine-petra-koepcke/) with the below code in the html-part of the page, from various different websites (e.g. from website: http://kundentest.george-consulting.de/beispiel-seite/). I have got a setup now, where it works (more or less - quite slow and not all parts are displayed as I want...) BUT how can I define the URL in the below script for the source as variable from the parent side (in my example below the 'kundentest.george-consulting.de') ? Is there a way to do that?

Example code from the iframe-page:
....Shortcodes from Events Manager plugin.....
Code:
<script src="http://kundentest.george-consulting.de/wp-content/plugins/advanced-iframe-custom/ai_external_config_carola.js"></script>
<script src="http://kundentest.george-consulting.de/wp-content/plugins/advanced-iframe/js/ai_external.js"></script>


Example code from ONE parent page:
Code:
[advanced_iframe securitykey=".." use_shortcode_attributes_only="true" id="carola" width="1000px" same_height_as="body"scolling="no" style="border: 0px none; margin-left:0px; margin-top:0px; display:block; " enable_lazy_load="true" hide_page_until_loaded_external="true" enable_lazy_load_threshold="200" enable_lazy_load_fadetime="0" src="http://pferdetermine.de/kurs-termine-petra-koepcke/?iframe=Babette+Teschen"]


Example code from the config file:
Code:
var iframe_id= "carola";
var updateIframeHeight = "true";
var keepOverflowHidden = "false";
var hide_page_until_loaded_external = "true";
var iframe_hide_elements="#header,.entry-header,.tc-header,.site-title,.tc-reset-margin-top,.navbar-wrapper,.container outside, .site-description";


I hope you can help!
Regards,
Kathrin

Author:  TinyWebGallery [ 4. Feb 2016, 23:31 ]
Post subject:  Re: use the same iframe Page on different parent pages

the setup looks o.k. for one domain. The problem is that you wrote that you have different content depending on the parameter.

The issue is that inside the ai_external.js also the back path to the domain is included.

Do you have the same configuration for all iframes?
Because than you can include several ai_external.js.

If not, you really have to add some additional Javascript which loads the config and the ai_external.js depending on this parameter.

Best, Michael

Author:  pferdetermine [ 5. Feb 2016, 00:42 ]
Post subject:  Re: use the same iframe Page on different parent pages

What do you mean by configuration? The code from the config file? Up to now I use a different ID - but I am not sure if I need that???

The only thing that differs besides that is the "?iframe=XXXX" in the Parent-Page in the src-URL.

So could I include i.e. 10 times:
<script src="http://kundentest.george-consulting.de/wp-content/plugins/advanced-iframe-custom/ai_external_config_carola.js"></script>
<script src="http://kundentest.george-consulting.de/wp-content/plugins/advanced-iframe/js/ai_external.js"></script>

with a different URL for 10 different websites that want to include the iframe page?
Or do you mean that I only need to include the last line 10 times (without the ai_external_config_ID.js)?

Author:  TinyWebGallery [ 5. Feb 2016, 01:02 ]
Post subject:  Re: use the same iframe Page on different parent pages

Only the last line 10 times.

The "problem" is that Javascript has global variables. Do the config would be the same for all ai_external.js.

If this is not the case you have to write a kind of Javascript switch that does load the config + the ai_external.js that is needed.

Best, Michael

Author:  pferdetermine [ 5. Feb 2016, 23:12 ]
Post subject:  Re: use the same iframe Page on different parent pages

I just tried that with my two "parent" sites to the one iframe site: On the site that is in the last line it works the other (the script in the middle) gets this error message:

Code:
DOMException: Blocked a frame with origin "http://petra-koepcke.pferdetermine.de" from accessing a cross-origin frame.
    at Error (native)
    at http://petra-koepcke.pferdetermine.de/wp-content/plugins/advanced-iframe/js/iframe_height.html?height=2622&width=690&id=pferdetermine:24:31


These are the scripts that I have in the page on the iframe-website:
Code:
<script src="http://pferdetermine.de/wp-content/plugins/advanced-iframe-custom/ai_external_config_pferdetermine.js"></script>
<script src="http://kundentest.george-consulting.de/wp-content/plugins/advanced-iframe/js/ai_external.js"></script>
<script src="http://petra-koepcke.pferdetermine.de/wp-content/plugins/advanced-iframe/js/ai_external.js"></script>

--> the website in the middle gets this error.

Any idea how I can resolve this besides using a separate page for every site that wants to access the iframe?

Author:  pferdetermine [ 6. Feb 2016, 00:45 ]
Post subject:  Re: use the same iframe Page on different parent pages

I have to add another problem: even with two different config files and requesting teh iframe from two different pages on the iframe-website, it only works on one site...

The code from the parent page where it does not show up (without any error message):
Code:
[advanced_iframe securitykey="..." use_shortcode_attributes_only="true" id= "pk" width="1000px" same_height_as="body" scolling="no" style="border: 0px none; margin-left:0px; margin-top:0px; display:block; " enable_lazy_load="true" hide_page_until_loaded_external="true" enable_lazy_load_threshold="200" enable_lazy_load_fadetime="0" src="http://pferdetermine.de/kurs-termine-petra-koepcke/?iframe=Petra+Köpcke"]


The config file:
Code:
var iframe_id= "pk";
var updateIframeHeight = "true";
var keepOverflowHidden = "false";
var hide_page_until_loaded_external = "true";
var iframe_hide_elements="#header,.entry-header,.tc-header,.site-title,.tc-reset-margin-top,.navbar-wrapper,.container outside,.site-description";


The iframe-side with extra page and this script included:
Code:
<script src="http://petra-koepcke.pferdetermine.de/wp-content/plugins/advanced-iframe-custom/ai_external_config_pk.js"></script>
<script src="http://petra-koepcke.pferdetermine.de/wp-content/plugins/advanced-iframe/js/ai_external.js"></script>


The only difference to the other website, where the code is working, is the ID....
...am I blind? Did I do something wrong?

Author:  TinyWebGallery [ 6. Feb 2016, 02:48 ]
Post subject:  Re: use the same iframe Page on different parent pages

Hi,

ai_external.js can be configured by a config file. If you have several ai_external.js still the last config file is for all!
Therefore you need the same id for all!

If you need different configurations you need to make a small Javascript that does the switch.

e.g.
if (page1) {
document.write(config1);
document.write(ai_external.js)
} else {
2nd config + 2nd ai_external.js.
}

Best, Michael

Author:  pferdetermine [ 6. Feb 2016, 18:16 ]
Post subject:  Re: use the same iframe Page on different parent pages

strange - got it working with different IDs but now also with the same IDs.
The only things I changed were the settings in the front-end of the plugin? But I thought it is sufficient to use the settings in the file only?

Therefore my question now: If I want to add the next website (PARENTWEBSITE) and give them access to my iframe-page (on the REMOTEWEBSITE), do we have to do something in the settings in the plugin, or is it enough to do the following:

On the REMOTEWEBSITE:
0. Create a new page (NEWPAGE) on the REMOTEWEBSITE with the content plus this script at the end of the page:
Code:
<script src="http://PARENTWEBSITE/wp-content/plugins/advanced-iframe-custom/ai_external_config_ID.js"></script>
<script src="http://PARENTWEBSITE/wp-content/plugins/advanced-iframe/js/ai_external.js"></script>


On the PARENTWEBSITE:
1. Install the plugin AI-pro on the PARENTWEBSITE
2. create the .../plugins/advanced-iframe-custom folder
3. copy the ai_external_config_ID.js in that folder:
Code:
var iframe_id= "ID";
var updateIframeHeight = "true";
var keepOverflowHidden = "false";
var hide_page_until_loaded_external = "true";
var iframe_hide_elements="#header,.entry-header,.tc-header,.site-title,.tc-reset-margin-top,.navbar-wrapper,.container outside, .site-description";


4. add the code to the page on the PARENTWEBSITE, where they want to display the iframe:
Code:
[advanced_iframe securitykey="SECURITYKEY" use_shortcode_attributes_only="true" id="ID" width="100%" same_height_as="body"  scrolling="no" style="border: 0px none; margin-left:0px; margin-top:0px; padding:0px; display:block; " enable_lazy_load="true" hide_page_until_loaded_external="true" enable_lazy_load_threshold="200" enable_lazy_load_fadetime="0"  src="http://REMOTEWEBSITE/NEWPAGE/?iframe=XXX"]


5. substitute the SECURITYKEY with the Securitykey from their AI-plugin

Is this all, or any settings in the plugin under Wordpress in addition (and if so: which?)???

Second questiton: I still have problems with the proper display: the width is still not using 100 %... as you can see here it sticks to 940px ... can you give me a hint what to change to get rid of the white space on top, left and right? http://petra-koepcke.pferdetermine.de/termine-reitkurse/

Author:  TinyWebGallery [ 6. Feb 2016, 22:13 ]
Post subject:  Re: use the same iframe Page on different parent pages

You still don't use the config files the right way as I think you don't need them at all!

Can you please answer my questions first. Do all iframes have the same configuration?

I'm write a FAQ about this scenario if I have all answers I need.

Btw: You can remove same_height_as="body" This is something from the old iframe plugin.

Best, Michael

Author:  TinyWebGallery [ 6. Feb 2016, 22:45 ]
Post subject:  Re: use the same iframe Page on different parent pages

I have finished the first FAQ for your solution:
http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-faq

Does this makes it more clear for you?

I'll add the FAQ when variables or config files should be used tomorrow.

Best, Michael

Author:  TinyWebGallery [ 7. Feb 2016, 00:24 ]
Post subject:  Re: use the same iframe Page on different parent pages

I also have added the FAQ when to use config files.

Author:  pferdetermine [ 7. Feb 2016, 04:03 ]
Post subject:  Re: use the same iframe Page on different parent pages

Thanks for your fast and good advice! :D
The config-file was the same for the two parent-sites besides the ID. If you say that the ID can be the same, then the config-files can be the same (and this is how it is working now). But I would like to use a config file (one for all), to centralize the settings:

I hoped to be able to avoid using the front-end-set-up of the ai-Plugin (I think you call it the administration part) on the parent-websites by only sending a config file and telling the people where to install it (or ideally install it centrally on my server). Because most of the people who own the websites, are not very familiar with those things. That's why I asked if it is possible not to use the administration part.
And since I can use one config file for all parent websites, I understand now, that nobody has to go to the admin part on the parent website - besides looking up the security key, correct?

I guess it would be also possible to store the config file for all parent websites on my server centrally, or is that a bad idea?

The alternative would be to define all variables in the shortcode on the parent-page. Is that possible or are there some variables from my config-file that cannot be included in the shortcode directly? ... All of this just because I would like to avoid that a decentral admin has to do the work to set up the correct fields and variables in the administration part of ai.

Does this make sense for you?

Author:  TinyWebGallery [ 7. Feb 2016, 22:02 ]
Post subject:  Re: use the same iframe Page on different parent pages

Having the config file on the server is o.k.

None of these settings can be in a shortcode. This is why they are not there.

Best, Michael

Author:  pferdetermine [ 7. Feb 2016, 22:14 ]
Post subject:  Re: use the same iframe Page on different parent pages

And can I install everything without using any setting in the administration - just by using the config file, the script and the shortcode on the page?

Author:  TinyWebGallery [ 7. Feb 2016, 22:21 ]
Post subject:  Re: use the same iframe Page on different parent pages

Sure you can. All examples on my demos work like this.
Set
use_shortcode_attributes_only="true"
And then nothing from the administration than the security code is used that can be set in the shortcode.

You only maybe have the the problem that if users enter something in the administration you have not set as variable it is still used as it is saved to ai_external.js. use_shortcode_attributes_only works for all settings you can do in a shortcode.

Best, Michael

Page 1 of 4 All times are UTC + 1 hour [ DST ]
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/