I am creating content that will be loaded in an iframe by another site.
Certain links on the (iframed) page load content via Ajax and then show/hide it using the slideToggle (jQuery animation) function.
I found Resizing an iframe based on content great help in assigning the iFrame the correct height on page-load, but how can I increase the iFrame's height as the content changes dynamically (without reloading a page)?
You can't interact with a different domain's DOM in the means of JS from inside the iframe changing the properties of the iframe itself. Or otherwise, JS from the main document, inspecting/altering the DOM from inside.
You'd be better off loading the iframe's contents per AJAX as well.
Related
I have a popup div in which I have an iframe. Initially, I have set the height of iframe to some px according to the content in it.
Now, I have a click event on the iframe from which I am redirecting to another view but this view has more content to fit the height. So I want to change the height of the iframe on that event or on the load of other view but I am unable to access the iframe from within that click event of a button.
EasyXDM provides a bunch of useful functions in order to manipulate communication between the client and fetched iframes
Here is an example similar with what you want to achieve.
Keep in mind that you should also control the content into the iframe as well.
I am trying to add dynamic image gallery to a site I am working on but I am limited to only HTML and css. So I made a separate page on my own server with required php file to create the gallery and used Iframe to load the gallery page to the site.
Problem is now there is two separate scroll bars. one to scroll the content in the iframe and one for the parent page. This makes scrolling on the page very messy. Is there any way so that I can get rid of the scroll bar for the Iframe and be able to scroll through the content within the Iframe from the parent page. Anyway I can make the Iframe behave like a div? I thought the best way would be to set the height of iframe so the height of iframe would change to fit whatever the content that's in it. This way I thought there wouldn't be need for a scroll bar on the iframe.
Here is the gallery page I am trying to load with Iframe http://lejund.com/plugin/#*
I am open to all your suggestions. Is there better way to achieve this other than the Iframe?
Thank you
I found this solution on github by davidjbradshaw.
https://github.com/davidjbradshaw/iframe-resizer
It's using window.postmessage to achieve this.
Is there a way of resizing an iFrame when the content within changes dimensions, for example
after a javascript effect?
In my example link I have used a Show/Hide Javascript Effect, but the resulting overflow is getting hidden because my iframe can't communicate.
My Website Example (Click Page 2 and you'll see the longer text is hidden)
Thanks
Yes it is possible. It's done by Facebook app for example.
To access the iframe from the main document:
window.frames['iframeName'].document.callAFunction()
window.frames['iframeName'].document.getElementById('foo')
From iframe to parent document:
parent.document.callAFunction()
parent.document.getElementById('foo')
Keep in mind that this only works, if both documents loaded from the same domain.
Now you can do:
Fetch an event if the iframe content changes
Submit the new size into the parent document
The parent document changes the iframes dimension
Enclose the iFrame in a div, assign width and height of iFrame to 100% and control the height/width of the div.
I have an image gallery placed in an iframe (not cross domain) and would like to use Lightbox to show a popupdiv in the main frame. Because right now when the image in the iframe is clicked, the popup div just covers the iframe.
I think it might have something to do with setting target="_top", but that doesn't quite do the trick. Setting the window.top location to my main url just causes the page to go to that url.
<iframe> cannot access its parent contents unless the parent frame provides a co-operative Javascript.
Instead of embedding your gallery directly via <iframe> you should embed it using a helper Javascript.
Then this helper Javascript would communicate with <iframe> Javascript via postMessage()
and the helper Javascript would do the required DOM manipulation on top level for opening an overlay <div> in the top level frame.
https://developer.mozilla.org/en/DOM/window.postMessage
I've got a parent page and an iframe inside that page. The links in the parent control the page that gets loaded in the iframe. What I want to do is refresh the parent page when the iframe gets loaded.
I've got this in the iframe:
RefreshParent(){
parent.location.reload();
}
<body onload="RefreshParent();">
But, the above code refreshes the whole parent page along with the iframe inside it which in turn reloads the parent page and goes into an infinite loop.
You can't refresh the parent page without reloading the iframe.
What you could do is use AJAX to update the parent's content, but that could be a fair amount of work (using the jQuery or Prototype frameworks would make this easier).
You won't need to use ajax techniques either. You can simply call a javascript function in parent page from the page contained in the iframe of parent page. This way you can easily perform actions on parent page. How to refresh parent page partially from page in iframe without affecting the iframe illustrates how.
Hope this helps.
You can't tell the parent window to refresh and exclude any part of its own page, including the iframe contained within it. You can do this using AJAX techniques though.
As long as your on the same domain you can use something like:
window.parent.location = window.parent.location + '?parent-updated=true'
You'll need to have your iframe become a "regular" frame in order to preserve it while refreshing another part of the page. Since the iframe is technically part of the parent (it's an inline frame, after all), refreshing the parent will reload the iframe content as well.
Depends what your layout is, but as other posts have observed you cannot refresh the parent frame without refreshing the iframe itself as it is part of the page.
If you do not wish to use ajax, and layout permits, one solution is to place the contents of the parent frame in an iframe itself. You can then tell the parent page to refresh the iframe containing the 'parent content' when your iframe loads. If your 'parent' iframe is borderless and there is no scrolling then this is all transparent to the user.
You could push this technique as far as a couple of iframes for the parent contents and it can be quicker and simpler to implement than ajax, beyond that you're as well to bite the bullet and implement an ajax solution.