Change links targets/href

This demo works for HTTP and HTTPS. You are on HTTPS right now Please click here to get to the HTTP version.

This examples show the "Change links targets" feature which only available in the pro version of the advanced iframe.

With this settings you can modify the link targets of the parent page to open existing links inside the advanced iframe. You are also able to modify link targets and href inside the iframe if you are on the same domain. This is also possible if you are able to use the external workaround. The full jquery syntax is available to select the links you want to modify. You find a small jQuery help which covers common usages in the settings.

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.

Example 10: Change links targets at the parent and at the iframe page additional the href if the iframe is on the same domain

This example modifies the following two links. Link TWG features page and Link JFUploader page. They both don't have any target set. So by default they would open in the same window. The example modifies the links that the links are both opened inside the iframe. Also change_iframe_links_href="append~?conf=1" does append conf=1 to all this links! hover twice over the links to see the result! On top the |bold makes the clicked link bold which stays like this.
On the iframe page you also see 3 links on the left without any target set. The demo modifies the 3 links that they are opened in a new window. Also the target of the form is changed! If you click on register the page does now also open in a new window.

And the shortcode which is used is:
[advanced_iframe securitykey="your key" use_shortcode_attributes_only="true" src="//www.tinywebgallery.com/blog/wp-content/plugins/advanced-iframe/example/example10.html" id="example10" height="400" width="600" scrolling="no" change_parent_links_target="a#link1,a#link2|bold" change_iframe_links="#iframe-navigation a,form" change_iframe_links_target="_blank" change_iframe_links_href="append~?conf=1"]

Example 11: Change links targets at the iframe page if the iframe is on a different domain + border + iframe redirect

This example shows a couple of small features:

  • The links inside the iframes have no target by default. They get a _blank and then the link is opend in a new window. The external workaround is used as the iframe page is on a different domain. This change is done for link 1 and 2 only!
  • The iframe has a red border. Because the "Show only a part if the iframe feature" is used the surrounding div needs a style. This can be set with show_part_of_iframe_style
  • The iframe page has an automated redirect to the parent page if not included inside an iframe. So if you click on a link alyways this page is opened again! You can try to open the iframe page directly. It opens this page again where the page is included.
  • The href of the iframe is changed from example.html to example_detail1.html! This change while you hover over the link. The first time you still see the old link but once you hover over it again you see that it has changed! So as the hover is before the click you go to the new url then! This change is done for link 1 and 2 only!

Because different configurations are used on this page the code changes in the external page are defined before the script is included:

<script>
var iframe_id="example11";
var updateIframeHeight = "false";
var iframe_redirect_url = "//www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo";
var change_iframe_links = "#iframe-navigation a#iframe-right-div-link-1, #iframe-navigation a#iframe-right-div-link-2";
var change_iframe_links_target = "_blank";
var change_iframe_links_href = "example.html~example_detail1.html";
</script>
<script src=”//www.tinywebgallery.com/blog/wp-content/plugins/advanced-iframe/js/ai_external.js”></script>

And the shortcode which is used is:
[advanced_iframe securitykey="your key" use_shortcode_attributes_only="true" src="//www.mdempfle.de/examples/example11/example.html" id="example11" height="1000" width="900" show_part_of_iframe="true" show_part_of_iframe_x="22" show_part_of_iframe_y="85" show_part_of_iframe_width="187" show_part_of_iframe_height="121" show_part_of_iframe_style="border: 2px solid #ff0000;"]

Have fun using Advanced iFrame Pro,

Michael