< back to the overview of "Add iframe url to parent"
Example 57: Add iframe url as param remote domain with hash + url rewrite
This example shows how the current iframe url is added to the parent url as parameter if the iframe is on the REMOTE domain and the external workaround can be used. This features is only available in the pro version of the advanced iframe.
To make it easier to copy/paste the examples most examples are fully configured in the shortcode directly. I use use_shortcode_attributes_only="true" that none of the settings from the administration are used.
The following two settings are the important ones:
- map_parameter_to_url="iframe" - This enables that the value of parameter page should be opened inside the iframe
- add_iframe_url_as_param="remote" - This enables that the iframe url is on the remote domain and should be added to the parameter defined at map_parameter_to_url. In this example the var add_iframe_url_as_param="remote" is also set before the ai_external.js as this example works independent of all other examples.
- add_iframe_url_as_param_prefix="hashrewrite" - enables that the the url is saved in the database and an id is added to the url like /iframe/X. The change in the url is a little bit delayed as there is an additional Ajax call to the server.
IMPORTANT: if you want to use "hashrewrite" you need to set this and "Map parameter to url" in the administration AND in the shortcode because in the shortcode alone it is loaded too late! As other plugins also can rewrite the url please check if they are compatible! First use "hash" and then try "hashrewrite"! "hashrewrite" is only possible if you do not use "plain" as "Permalink Settings".
Click on the links in the iframe and check the url in the address bar.
If you reload you get a 404 because the URL rewrite is not activated in this demo as this would influence also all other demos! So if you click below and do a reload you get a 404 here. So this demo can only show how the new URL does look like.
[advanced_iframe securitykey="your key" src="//www.mdempfle.de/examples/example57/page1.html" use_shortcode_attributes_only="true" id="example57" height="150" width="310" map_parameter_to_url="iframe" add_iframe_url_as_param="remote" add_iframe_url_as_param_prefix="hashrewrite"]
On the remote page you have to add
<script>
var updateIframeHeight = "true";
var iframe_id = "example57";
var add_iframe_url_as_param="remote";
</script>
<script src="//www.tinywebgallery.com/blog/wp-content/plugins/advanced-iframe/js/ai_external.js"></script>