This examples show the "Browser detection" feature which only available in the pro version of the advanced iframe.
Modern website designs are not pixel based anymore and depending on the features of the browser they also look slightly different. So if you use the "Show only part of the iframe" feature it is possible that the area you want to cut out of the website is at a slightly different place. You can also use the browser detection to show different iframes for different browsers or even mobile devices.
If you want to have different iframe configurations depending on the browser user agent string you have to use the shortcode attribute browser="" and define the browsers there which should be used for this shortcode. You can define several browsers by separaring them by, and even define browser versions by adding the versions with (version). Each of the shortcodes which are browser dependent need to have the same id! The last shortcode should have the attribute browser="default". This is then used if no browser does match before. If you don't do this you can show iframes only for a specific browser.
- Example 12: Special settings for IE 10 and IE 11
- Example 13: Special settings for IE, Firefox and Chrome
- Example 14: Show a different iframe on iframe on apple devices and mobile devices
- Example 36: Show a different content depending on the device
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 12: Special settings for IE 10 and IE 11
This feature shows different parts of an example page depending on the browser. For IE10 and IE11 an area 100 pixel higher is shown. So normally the difference of browsers is only a few pixels but a higher difference is used here to show that the setup works. If you want to test in IE only you can press F12 to see the developer tools and change the user agent. See the external iframe page here.
And the shortcode which is used is:
[advanced_iframe securitykey="your key" use_shortcode_attributes_only="true" id="example12" browser="ie(10),ie(11)" src="//www.mdempfle.de/examples/example3u4/example.html" height="600" width="800" show_part_of_iframe="true" show_part_of_iframe_x="21" show_part_of_iframe_y="113" show_part_of_iframe_width="166" show_part_of_iframe_height="136" show_part_of_iframe_next_viewports="573,243,205,128"][advanced_iframe securitykey="your key" use_shortcode_attributes_only="true" id="example12" browser="default" src="//www.mdempfle.de/examples/example3u4/example.html" height="600" width="800" show_part_of_iframe="true" show_part_of_iframe_x="21" show_part_of_iframe_y="213" show_part_of_iframe_width="166" show_part_of_iframe_height="136" show_part_of_iframe_next_viewports="573,243,205,128"]
Example 13: Special settings for IE, Firefox and Chrome
This feature shows different parts for IE, Firefox and Chrome and a default for other browser. For each setting the area does move for 100 pixel. See the external iframe page here.
And the shortcode which is used is:
[advanced_iframe securitykey="your key" use_shortcode_attributes_only="true" id="example13" browser="ie" src="//www.mdempfle.de/examples/example3u4/example.html" height="600" width="800" show_part_of_iframe="true" show_part_of_iframe_x="21" show_part_of_iframe_y="13" show_part_of_iframe_width="166" show_part_of_iframe_height="136" ][advanced_iframe securitykey="your key" use_shortcode_attributes_only="true" id="example13" browser="firefox,chrome" src="//www.mdempfle.de/examples/example3u4/example.html" height="600" width="800" show_part_of_iframe="true" show_part_of_iframe_x="21" show_part_of_iframe_y="113" show_part_of_iframe_width="166" show_part_of_iframe_height="136" ][advanced_iframe securitykey="your key" use_shortcode_attributes_only="true" id="example13" browser="default" src="//www.mdempfle.de/examples/example3u4/example.html" height="600" width="800" show_part_of_iframe="true" show_part_of_iframe_x="21" show_part_of_iframe_y="213" show_part_of_iframe_width="166" show_part_of_iframe_height="136"]
Example 14: Show a different iframe on apple devices and mobile devices
This example is pretty much like the one before but with different browser settings. The first settings is for apple devices, the 2nd for smart phones and the 3rd for the rest. For each setting the area does move for 100 pixel. See the external iframe page here.
And the shortcode which is used is:
[advanced_iframe securitykey="your key" use_shortcode_attributes_only="true" id="example14" browser="ipad,iphone,ipod" src="//www.mdempfle.de/examples/example3u4/example.html" height="600" width="800" show_part_of_iframe="true" show_part_of_iframe_x="21" show_part_of_iframe_y="13" show_part_of_iframe_width="166" show_part_of_iframe_height="136" ][advanced_iframe securitykey="your key" use_shortcode_attributes_only="true" id="example14" browser="mobile" src="//www.mdempfle.de/examples/example3u4/example.html" height="600" width="800" show_part_of_iframe="true" show_part_of_iframe_x="21" show_part_of_iframe_y="113" show_part_of_iframe_width="166" show_part_of_iframe_height="136" ][advanced_iframe securitykey="your key" use_shortcode_attributes_only="true" id="example14" browser="default" src="//www.mdempfle.de/examples/example3u4/example.html" height="600" width="800" show_part_of_iframe="true" show_part_of_iframe_x="21" show_part_of_iframe_y="213" show_part_of_iframe_width="166" show_part_of_iframe_height="136"]
Example 36: Show a different content depending on the device
This example shows a new feature of version 6.5: Include Html. Normally it does not make sense to include a static text. But together with the browser detection it is a really nice feature: You can e.g. show an iframe for desktop and tablets. For mobile phones you can then e.g show a text/link to a version optimized for mobile phones.
In the example below I simply show a different text for desktop, tablet and mobile phones.
You are on a unknown device
And the shortcode which is used is:
[advanced_iframe securitykey="your key" use_shortcode_attributes_only="true" id="example36" browser="ipad" include_html="You are on a ipad"][advanced_iframe securitykey="your key" use_shortcode_attributes_only="true" id="example36" browser="iphone" include_html="You are on a iphone"][advanced_iframe securitykey="your key" use_shortcode_attributes_only="true" id="example36" browser="tablet" include_html="You are on a tablet"][advanced_iframe securitykey="your key" use_shortcode_attributes_only="true" id="example36" browser="mobile" include_html="You are on a mobile phone"][advanced_iframe securitykey="your key" use_shortcode_attributes_only="true" id="example36" browser="desktop" include_html="You are on a desktop"][advanced_iframe securitykey="your key" use_shortcode_attributes_only="true" id="example36" browser="default" include_html="You are on a unknown device"]
Have fun using Advanced iFrame Pro,
Michael