872 comments found.
I tried to dynamically set the “src” of the iframe via javascript, but I noted that the iframe does not appear, it only appear when I set the src. I want to open the iframe in a modal window only when I click a button. Is it possible?
I have several iframes in my site, I want to define the src dynamically on a button click to avoid the site delay to load the entire site.
I have also a question first: How can you use the plugin if you have not bought it yet?
To your other question. Have you set the the iframe to be hidden until it is loaded? Than not setting the src would cause that the onload event is not fired which shows the iframe again. So you have to disable this feature.
Have you also tried the lazy-load functionality? Then iframes are only loaded when they are in the viewport. But the loading is normally triggered by scrolling. Not a click on a button. But you could trigger this directly by calling $(window).trigger(‘scroll’). So maybe a combination of lazy load and triggering the scroll on click could be the solution for you.
Another issue can be that if your iframe is hidden (display:none) by default. The auto height detection is than not working because browser do return 0 then. So you need to set a height then.
To test the plugin, I’m using the free version. I will buy it today when I realize waht I need, this plugin is really fantastic: https://wordpress.org/plugins/advanced-iframe
I did as you told me, but the iframe does not appear when I set the src dynamically.
Here is the code:
It show a modal window with 2 tabs, and each tab open an iframe.
http://wordpress9.hospedagemdesites.ws/eventos01/wp-content/uploads/sites/13/2014/05/promosites.jpgThe urlChange() is called on a onclick event.
I bought your plugin, please, tell me how to apply the lazy load but allow the iframe content appear only after is it completly loaded.
I hide some parts of the iframe, and with the lazy enabled I noted that first it shows the original iframe and after it hides the parts.
1. I don’t see a code here.
How do you hide elements?
The original pages has to be loaded fully before something can be hidden. Anything else would mean to modify content before it is fully loaded. But you can hide iframes until they are fully loaded.
“but allow the iframe content appear only after is it completly loaded.” ? You have an option “Hide the iframe until it is loaded” if you are on the same domain. How is your setup? Because there are 2 options for this.
1. How do you hide elements?: In the “Show only a part of the iframe or modify it” tab -> “Show only one element” -> I informed #wpbody-content.
I enabled this option: Hide the iframe until it is loaded
The problem is that I do not want to inform the src in the iframe, bacause of the delay to load all the iframes. I want to do it dynamicallly with this script:
<script> function urlChange() { var iFrameTodasPaginas = document.getElementById(‘iFrameTodasPaginas’); var iFrameAddPagina = document.getElementById(‘iFrameAddPagina’); if (!iFrameTodasPaginas.src) { iFrameTodasPaginas.src = ‘site1.php’; } if (!iFrameAddPagina.src) { iFrameAddPagina.src = ‘site2.php’; } } </script>
If you set the content later all the Javascript that does the hide during load has run already. When setting the src you have to check if the onload event is fired again. If this is the case you can hide the iframe before you change the src and than the onload event does show it again. But I still think using my lazy-load functionality and triggering the show of it manually is the better way. I check if it is possible to show the iframes independent of each other because they are on the same place for the browser.
Thanks for the support.
1.) I tested in Firefox and Chrome, they are ok. But in IE, the changes I did in the iframe content delay a lot to appear. First it shows the original iframe and after seconds the changes are applied. How to fix it?
2.) Other question: the iframe delay a lot to open. How to improve the performance?
1.) you would need to hide the iframe first. Have you done this? (Ie is very slow :() But I already test my solution with the lazy load you can trigger manually. This seems to work very well. And all features of AIP are still supported.
2.) You wanted that the iframe should not load because of a delay of the page? then Actually lazy loading is the way to go. With the changes I test you can even do the following. Load the page and trigger the loading a) when the user clicks b) after a second delay…
Another thing of performance – check wich files are big or take long to load and preload them in the background. then the file is cached in the browser already.
1.) Please, explain how to do this solution with lazy load and trigger manually. I’m lost. Remember that it is not ok only in the IE. I disabled the “lazy load” option because it shows the original iframe and after it shows the changes.
2.) And about the delay, it occurs in all browsers. How to preload some iframes in the background?
1.) You would need the new version I’m coding right now. There you can select “Trigger loading manually”. Than a Javascript function is created you can call when you like. 2.) this would eable you to e.g. load the iframe that is most common to be clicked. Really preload of iframes in the background is not possible because adding an iframe to the dom cause it to be loaded again. With background preloading I means to e.g. load the Javascript already…
I’m testing this right now and create a pro demo for this. I’ll let you know when the tests are done. You can test this new version than.
The demo is online now http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/lazy-loading#e25 Can you contact me by e-mail (contact form here on codecanyon). I can send you this version then.
Hi,
How to show a loading .gif image while the iframe is loading?
You can simply enable this feature at Settings -> advanced iframe pro -> Show loading icon ob by the shortcode attribute described there. e.g http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/show-only-a-part-of-the-iframe you see the loading icon.
Hi,
How to define !important for a class. For instance, I want to hide a div (the admin bar) that is defined as !important already.
!important cannot be set of a class. only for a style. This can e.g. set with ‘cssText’ ‘display: none !important’ But if you mean the wpadminbar. There is no class assigned. You can simply hide it with the hide features feature and use #wpadminbar as setting.
Hi. i bought this plugin because iframe height. so i set the responsive height option but i could not solved height issue. please let me know one by one.
Have you read the quickstart guide? Which setup do you have? Same domain or different domains?
i hope same domain. quickstart guide means documentation pdf? i have set “Enable responsive iframe” = yes
No. Quickstart guide means quickstart guide: http://codecanyon.net/item/advanced-iframe-pro/5344999 in the middle of the page and also in the settings you find this. And have you read: http://www.tinywebgallery.com/blog/responsive-iframes-with-advanced-iframe-pro ?
btw. www.example.com and example.com are different domains. This is VERY important to understand if you want to use certain features.
can’t install the plugins it says the target folder already exists
soved installed with ftp and now it works
hi i want to iframe only the media box can you send me the code please http://neetesh-bipu.bandcamp.com/track/sailee
what is the media box? And why don’t you use the area selector? it generates the code for you.
Best Michael
Problem with iPad:
This iFrame Pro Site works perfect: http://www.hotel-am-augustinerplatz.de/angebote-buchen/business-messehotel/fahrplan.htmlBut only on Desktop. On iPad the iFrame is not the same part of the frame.
If the ipad does render the page differently you should use the browser detection where you can set different settings for the ipad. See: http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/browser-detection
Yes! This works a little. But now iPad is showing two iFrames!
Please check the documentation. You have to specify the other iframe as default.
How to disable popup showing from iframed other domain.
The popup is a normal popup which happens normally on this domain? If you are on different domains you cannot change anything there directly.
Is it possible to change the parent page URL when clicking inside the iframe? I know this is possible with javascript but I can’t really tell if it’s possible with the pro plugin of yours.
Please describe in more detail what you want. you can of course change the parent page if you have e.g. defined target=”_top” at the link in the iframe. And the plugin change change link targets if you are allowed to (same domain or you are able to use the external workaround. See the quickstart guide…)
It’s hard to explain in a message but I will do my best.
Let’s say I have an html page at www.mysite.com/page.html. This page has a button that when clicked it takes you to www.mysite.com/page2.html.
I need to embed this html page in wordpress under www.mywordpress.com/page/
Is it possible to:
1. Change the url to www.mywordpress.com/page2/ when the button is clicked?
2. Make the www.mywordpress.com/page2/ link take you to www.mywordpress.com/page2/ with www.mysite.com/page2.html loaded inside the iframe?
I believe most (if not all) of this functionality can be achieved with js, but I’m hoping your plugin can make it easier.
1. I don’t understand what you want here 2. You can map parameter to urls. Like using …?page=1 opens page1. ?page=2 opens page 2.
Be aware that cross site domain Javascript access does not work anymore…
Hi, in the ‘Features of Advanced iFrame Pro v 5.8.1’ it says:
- Add a css and js file to the parent page
What does this mean? Thanks
You can e.g. add a test.css or a test.js to the page you include the iframe to. This can be useful if you want to e.g. style the parent page differently than your other pages. Or hide elements there for example. The plugin can modify styles on the fly also. The difference is that when you use a css file the modifications are done right away (because it is added to the header) ant not after the page is fully loaded.
Sounds great and it is exactly what I need (when I understand it right). But where do I have to ‘add’ the e.g. test.css? Any example? Thanks.
In the settings. “Add additional files” -> wp-admin/options-general.php?page=advanced-iframe.php#ad
There you also find the description of this setting.
<!DOCTYPE html>
<head>
</head>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Mike</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
and also a style.css:
table,td,th
{
border:1px solid black;
}
table
{
width:100%;
}
th
{
height:50px;
}
In ‘Advanced iFrame Pro – Default settings’ I set URL: http://example.com/index-css/index.html and ‘Add additional files’ Additional css: http://example.com/index-css/style.css
But the iframe showns no css styles.
What do I have to change?
You need to understand the feature: “Add a css and js file to the parent page”. The parent is the page where the iframe is included to. if you want to modify styles in the iframe page you have to do this directly with settings in different sections. There you need to be on the same domain or able to use the external workaround.
I understand now that I can modify the style of the parent page where the iFrame is included. Can I also modify the style of the page that I want to include in the iFrame (the page of the URL of the Default Settings) with help of the Advanced iFrame Pro? Would be very important for me and it is only one parameter. Thank you once again.
Yes – like I have written before. See the section: Modify the content of the iframe if the iframe page is on the same domain. And if you can use the workaround it is also possible if you are on different domains.
Best, Michael
Hi Michael,
thanks for your time.
It is on the same domain.
I made some nice tries in ‘Modify the content of the iframe if the iframe page is on the same domain’ but it didn’t work.
It’s a very simple scrip basically a table. So with firebug it is hard to find a style…
Is there any chance to change the width (<table width="630">)?
<code>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Example</title>
</head>
<a name="top"> </a>
<table width="630">
<tr>
<td>
<strong>
<font size="2" face="verdana,arial,helvetica">
<a href="example.html">Lorem ipsum dolor sit amet...</a>
</font>
</strong>
<br />
</td>
</tr>
</table>
</code>
Thank you once again.
</table>
You have to find a jQuery selector that matches. In you case where you only have one table “table” should work fine. and width:700px; in the other field.
Best, Michael
Hello Michael,
thanks for all your answers but I still don’t have the answer to my question. With a width of 700px I do not need ‘Modify the content of the iframe if the iframe page is on the same domain’. I set in ‘Default settings’ width: 700px and it is done. But for this I need more or less the whole page width..
My problem is: I do not have the whole width of my page. The left column, 500px, is occupied. The right column, 400px, should be for the iFrame.
The problem is that the table has a fixed width of 630px (<table width="630">).
What I would need is something like 'eliminate' the width:630px and declare it new with e.g. width:100% (or width:400px).
Can I do this with: ‘Modify the content of the iframe if the iframe page is on the same domain’?
I there an jQuery selector where I can 'eliminate' the width of 630px.
Can the 'Support for the advanced iframe plugin' help me with this?
</table>
If I unterstand you right “table” should work fine. and width:100%; or 400px. Whatever you like.
So for me it seems you need to set the width of the iframe to .e.g 400px and then set the width of the table inside also to this.
“Support for the advanced iframe plugin” would mean that you pay me that I do this for you 
.
Best, Michael
Thanks once again.
That’s what I did:
Default settings Width – 400px
‘Modify the content of the iframe if the iframe page is on the same domain’ and under: ‘With the next 2 options you can modify the css of your iframe if it is on the same domain. The first option defines the id/class/element you want to modify and at the 2nd option you define the styles you want to change’.
Content id in iframe – table (I tried also: #table, or do I have to use something like: $(‘table[width=”630”]’)??)
Content styles in iframe – “width:400px” (or width:400px)
But the width didn’t change. The text is still cutted.
I send a link to my test iframe page to you in private.
Your pages are not on the same domain. I wrote you this in an e-mail as well.
Thank you. Now both are on the same domain. But the text is still cut. For the settings:
Setting 1: Default settings Width – 400px
Setting 2: ‘Modify the content of the iframe if the iframe page is on the same domain’ and under: ‘With the next 2 options you can modify the css of your iframe if it is on the same domain. The first option defines the id/class/element you want to modify and at the 2nd option you define the styles you want to change’.
Content id in iframe – #table
Content styles in iframe – “width:400px” (After ‘Update Settings’ the single quotes change into double quotes)
Can you please check my settings?
Thanks once again
You table has no id table. Therefore you have to use table only not #table. and the width is completely without any quotes.
For a fixed width problem solved. Thanks! In a reply you said that also width:100% (responsive) is possible. But with this I have a Height problem. You wrote in your Quick Start Guide: ” Please note that % does most of the time does NOT give the expected result (e.g. 100% is only 150px)...” but not only for % also for e.g. height:800px when I resize the browser the height is only about 150px. What can I do?
I don’t understand what you mean. You mix width and height. And also with of the parent and the iframe. What do you mean that you resize the browser? With or without page reload? Have you enabled auto height? have you enabled responsve iframes? Have you read the blog about responsive iframes? http://www.tinywebgallery.com/blog/responsive-iframes-with-advanced-iframe-pro
So you really have to specify in detail what you want because many parameters do influence the best solution.
In my iframe page there are several links which open in the same iframe. Is there an option to open the links in a new page/iframe?
yes. In the advanced section you can configure to modify targets.
Thank you. I set in ‘Modify the content of the iframe if the iframe page is on the same domain’ : ‘Change iframe links’ to ‘a’ and ‘Change iframe links target’ to ‘_blank’. Now all links of the iframe open in a new window. That’s OK. Problem: But outside of the parent page. Where/How can I set that all links open in the parent page?
use _top. _blank is a new window/tab
My Wordpress theme and my parent page are in the same domain but the parent page is outside of Wordpress. When I open a link in the iFrame (in Wordpress) the link opens outside of Wordpress (but in the same domain). Is it possible that the link opens within Wordpress?
The page where you have the iframe is not wordpress? How can you use the plugin? So links inside the iframe should open inside the iframe? Than you might should change the targets inside the iframe directly.
No. The page where I have the iframe is in Wordpress. But the page that I want to integrate in the iframe is Not in Wordpress (it is in a folder outside Wordpress). But both are in the same domain! What can I do that the links of the iFrame open within Wordpress?
change the link targets with the plugin. -> Change iframe links + Change iframe links target
Once again thank you very much for your fast answers! ‘Change iframe links: a’ should work for me. Can I set the ‘Change iframe links target’ to a special page e.g. http://example.com/openlinks ?
If you want it for a specific iframe only you need to specify the settings as shortcode attributes (use the shortcode generator) or you don’t use a but chechk if this one page has a unique css selector and use this before the a.
Sorry but where is “THE shortcode generator” as you wrote? The shortcode should be something like: [change_iframe_links_target=”http://example.com/openlinks”] and together with [advanced_iframe securitykey=”..............” ] ? Thanks
If you have the latest version then there is a big blue button with “Generate shortcode for the current settings”.
The shortcode you posted in not correct.change_iframe_links_target is a attribute of the advanced_iframe. See the demo how shortcodes which work for a single iframe only should look like.
Do I have to generate with the blue button two times a shortcode? One for the iFrame (1) for the source page and one for the iFrame (2) for the links which are coming form the source page iFrame (1)?
No – why should you? The shortcode generator simply gives you a shortcode that has all you current settings. So you have a shortcode than which is independant of the default. This is also described there…
Hi,
I am using your plugin to include an iframe from another domain, the person hosting the other domain has asked that i forward any query string to their iframe.
How can i achieve this using your plugin?
Thanks, Dani
You can define the parameters which should be forwarded. To forward all parameters you have to change the code a little bit.
Best, Michael
If you are using version 5.8 please remove the “false” in the “Set Iframe height by ratio” field and save. This is a wrong default and causes the plugin to have an undefined height! This is fixed in 5.8.1 which is in review by codecanyon right now.
Sorry for the inconvenience.
Hi all
I’m interested in the iFrame as a solution to a situation I’m faced with. I am currently using a theme (theme 1) but would like to include a feature from another theme (theme 2) (which I will have access to).
Would this be the correct solution for me?
Many thanks in advance.
I’m not sure. Do you have a theme switcher already? and then you want to include this page?
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>ABC</title>
</head>
<table width="550">
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</td>
</tr>
</table>
I want to integrate the iframe in a column with a width of 500px. Everything works fine. The only problem is the <table width="550">.
After 500px the text is cutted. Can I change this with e.g. the Advanced iFrame Pro - Modify the parent page?
</table>
sure. You can e.g. body > table as content_id and width:700px as style in the next field…
Thanks for your answer.
But I think my problem is different:
The width of the column of my page is 500px and so also the iframe should be only 500px to fit into the column. The text of the parent theme is 550px <table width="550">.
My problem is:
When the iframe is 500px but the text of the parent page is 550px then there are 50px of text not visible in the iframe (at least for me).
Question: How can I get all the text within the iframe (without changing the whole theme)?
</table>
you first have to check if the content in the iframe can be 500px or if it needs a minimum with of 550px. If this is the case you need to modify the iframe page itself. If this work fine you have to check if e.g. your theme has margins or passings for iframes… Paddings and margins of the parent can also be changed…
Hi Matey
Is this standalone or just for WP, i might have been to hasty with my download finger ;(
It is just for Wordpress. If you need it standalone I might be able to extract the part you need for you. But this would be a custom solution than. Best, Michael
Hi
Presale questions please.
All I want to do is increase the width of the left iFrame on my site.
I’m not a Developer so would this be something I can do easily?
Thank you
I’m not sure why you need a plugin for this if you already have an iframe. You can of course change the width in the plugin.
Best, Michael
Ok awesome. I misunderstood the description of your plugin Thanks for your quick reply.
Hello. I bought your plugin and I started using. I had an issue, would mind to take a look? In this page http://arito.visual-fusion.org/?page_id=17 I have an iframe of a list of cars from this page http://home.standvirtual.com/aritoautomoveis_listagem.html . Everything seems to work fine. When I click in any car from the list, it goes for the correspondent page staying as an iframe of my page. But if you take a closer look, it doesn’t happen all the times like that. It only works fine, if I click on the car picture or on the car title. If I click somewhere else but still on the correspondent entry of the car (like on the small description), it goes out of my page, so it will not work any more as an iframe. Try to check if you can reproduce what I’m explaining. If so, could you explain why is this happening? Thanks.
Hi,
the reason is that a couple of elements have:
onmousedown=”top.location.href=’http://home.standvirtual.com/aritoautomoveis_visualizar_7736099_carros.html"
set. top.location.href does open the link in the main window
As you are not on the same domain and the other page (I think) is not yours you can not do anything against this than asking the other website to remove this.
Best, Michael
And is not possible to have a way of “blocking” a user for leaving the main page when clicking in the iframe?
This would be a iframe burster blocker. What is possible is something like a warning that the iframe want to leave the iframe. But it is not possible to open the link in the iframe again.
At least this warning would be nice to have. Could you provide a guide how to implement that? Thanks
I could solve with a iframe buster buster method. I used this: var prevent_bust = 0; window.onbeforeunload = function() { prevent_bust++; }; var interval = setInterval(function() { if (prevent_bust > 0) { prevent_bust -= 2; window.top.location = ‘http://how.appspot.com/get204'; clearInterval(interval); } }, 1); Thanks!!!
Good .
Hello, can I use ur tool to preview page except some buttons
Best, Michael
Must work with wordpress ? or can I use it for PHP website ?
the plugin is for wordpress. the page inside the iframe can be any website.
This does not seem to be wordpress. So you cannot use the plugin as it is for wordpress only.
I need something like your plugin for a project that I am working on this weekend. I have looked through your demo examples and I need to use your feature where you are only showing part of the page.
All I want in the iframe is the main content of the post. I have inspected my page and I know the part that I want displayed is everything inside of this section of the page (class=”entry-featured”). I have entered ( .entry-featured ) into your “Show only one element” field but it’s not clear to me how to proceed after this.
If you can please tell me how to do this I will buy your plugin right now.
Thanks.
I went ahead and purchased your plugin. I think the feature that I was trying to use (only display part of a page) only works in the pro version?
Actually, I think the feature that I am trying to use is available in both the free and pro version (Show only one element of iframe). I have searched through your PDF and the term “one element” does not appear anywhere in your documentation.
Can you please explain how to use this option?
What’s not clear to me is why I am entering parameters into your fields. Is it generating a shortcode base on my input that I can simply copy and paste where I want to insert the iFrame? If so, where is the shortcode that is being generated?
Hi. Have you read the quickstart guide? Because not all features are available on all setups. The pdf gives an overview what you can do. The documentation of each features is at settings -> advenced iframe pro like describe in the pdf. Show only one element of iframe. Does work on the same domain (frre and pro) and if you can use the external workaround (pro). The shortcode you enter does basically only need the security key. All other settings are read from the settings. So if you only need one iframe you can specify everything nicely in the settings.
If you use more than one iframe the settings in the administration are the defaults and all can be overwritten in the shortcode directly. In the pro demo you see many iframes which use the shortcode attributes only because this makes sure that settings do not change if you change the defaults in the settings. But you had a good idea. I’ll add a section on top which shows the shortcode of the current settings with the flag use_shortcode_attributes_only=”true” set. In the section “show only a part of an iframe” you find the area selector which does already does something like this for this feature.
By Quickstart guide are you referring to these four lines in your PDF?
Quick start guide
1.) To include a webpage to your page please check the following things first.
2.) Check if your page page is allowed to be included http://www.tinywebgallery.com/blog/advanced-iframe/free-iframe-checker!
3.) Check if the iframe page and the parent page are one the same domain. www.example.com and text.example.com are different domains!
4.) Can you modify the page that should be included?
If so, I am not quite sure what I am supposed to learn from that. I assume you do not have two Quickstart guides?
Can you please provide the specific page in your documentation that explains how to use this feature: (show only one element of iframe)
By the way, all of the content that I am trying to put in your iFrame is on the same domain.
The quickstart guide tells you which features you can use.
The documentation is at Settings -> advanced iframe pro: I copied it for you:
Show only one element You can define which part of the page should be shown in the iframe. You can define the id (e.g. #id) or the class (.class) which should be shown. Be aware that all other elements below the body are removed! So if your css relies on a certain structure you have to add additional css by “Content id in iframe” below. Very often also a background is defined for the header which you should remove below. e.g. by setting background-image: none; in the body. This can be done at “Content id in iframe” and “Content styles in iframe” below. Shortcode attribute: onload_show_element_only=”“
And the important information is that you are on the same domain. So you can use this feature.
.entry-featured is the right setting. So you only need to add the shortcode to the page then. Simply the one with the security key only.
Thanks. I was able to load a single element but it loads very very slow. It also loads the entire page (which I can see load) and then it loads just the part that I have specified.
Hi, of course the whole page is loaded. The server does not know which part you need. So the speed of loading has nothing to do with the iframe. The browser does request the content like it would do if you load the page separately. But you can specify to hide the iframe until it is fully loaded and modified. Simply activate this in the config.
I understand that the whole page is loading, what I meant was the content in the iFrame seemed to be loading much slower than the page loads outside of the iFrame. I was not being critical of your plugin. I am just trying to figure out what the problem might be.
The browser does load the parent page and the iframe page parallel. So both will take more time until they are fully loaded. Hide the content until it is fully loaded.
Thinking about buying this script for clickmybanner.com. The Sign-in and Log-in pages need to load within an iframe.
Can this script automatically detect the height of the content within the iframe? Is that even possible?
Please check the quickstartguide on the item details page. If you have the requirements (same domain or usage of the external workaround) than my answer ist 2 times yes.
