For a web page, practical reasons demand an iframe to link to other content within the domain. However, while the rest of the page (outside the iframe) doesn't need to scroll, the content within the iframe does. Rather than having a scroll bar within the iframe, how could I use the scroll bar of the page to scroll within the iframe?
The iframe links to a page from the same domain, and while it may not be possible to do this without scripting, ideally it would be a CSS-only solution. If necessary, javascript can be used.
If it helps, the iframe runs up the the bottom edge of the page, so I have been playing around with ways to extend it past the bottom and do it that way.
You would need to have the iFrame resize to the contained content to do this. A task that is after all these years still not as simple as it should be. Take a look at this lib that does the hard work for you.
https://github.com/davidjbradshaw/iframe-resizer
Related
I am wondering if there is any way to hide an AMP iframe in the case that the content inside the iframe does not load?
I have tried setting height to 0px (using postMessage from inside the iframe when content fails), but AMP does not allow this and I am having problems finding a way around this.
I would prefer a fix that allows me to hide it from within the iframe, but I don't think this is actually possible, so a simple solution to hide it from the outside page would also be great at this stage.
AMP Does't allow you to change much things dynamically, Because it may affect the user experience and page load. AMP is all about user first experience
So Unfortunately you don't have anyway to do it right now...!
does anybody know how can I expand javascript so that it targets whole website not only the page in iframe it is on. Im currently using a javascript for gallery on my website, so when you click on a picture it pops up enlarged, however since the page with javascript is in an iframe it shows only in the iframe, how can I accomplish the pop up to expand to the whole page?
Thanks in advance.
Iframes can call out to the window which embeds them using simple javascript (see window.frames on http://www.w3schools.com/jsref/prop_win_frames.asp). However, if src of the iframe is on a different domain, then the script can only affect the iframe, due to security policy within the browser.
If you'd like to apply a work-around, there are some solutions like this: Yet Another cross-domain iframe resize Q&A
These solutions tend to break on different browsers and with updates to browsers.
Your best bet is keeping the entire iframe contents within the browser by writing the iframe code yourself (and hosting on your own domain).
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.
I was studying how Disqus and other embedded wigets are implemented, and I came to realize that they don't use an enclosing iframe where all their widget is run. What they do is to append elements dynamically to the embedding page through JavaScipt and then run almost every form or button in some iframe. What's the point of doing this? Couldn't they just wrap everything in an iframe and then change the parent window URL (to allow navigation) through some kind of cross-domain messaging system such as easyXDM? Can anybody point out some benefits that arise from having some elements not inside an iframe?
Code inside an iframe may not be able to set cookies as browser thinks it is an advertisement.
Iframe content cannot control the size of the outside iframe, so iframe needs to be created with javascript and javascript needs to be loaded externally so that external site has total over iframe size.
What would prevent me from using an iframe to embed another page on another trusted site ?
It completely depends on what you want to do. If the iframe will contain scrollable content I advice against it unless you make it really obvious to the user that in that specific region of the screen he will have to use TWO fingers to scroll.