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...!
Related
I'm fairly new to web development so I don't have much experience with any of this. I currently have a navbar at the top of my website (made with Foundation), but I don't want it to reload every time the page reloads. I've noticed on several websites that certain parts of the page are kept in place when links are clicked and the url changes. How can I achieve this?
Thanks
There are several ways to achieve this. Using AJAX calls is one of them, iframe another. You could even create a one page application and show/hide elements when certain buttons are clicked. This will however force you to load all the data at once so I won't recommend that (depending on the website).
A small article about how you can use the iframe option.
A small article about the AJAX option, they include a small demo to show how it works.
You can set an <iframe> in your code and have the links in your nav target it. When you click on a link, the <iframe> will load the new content, but the rest of your page will not change.
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
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.
I am developing a webpage which our customers want to insert on their websites by wrapping my page in an iframe (cross domain). I don't need to interact with the parent or know anything about whats outside the iframe.
I am using HTML, CSS, Javascript and Webservices.
Question: How am I limited inside an iframe compared to if my page was running outside the iframe?
You're not. Any JS linked within the iframe from your domain will act in the context of the iframe. Aside from being crammed into an unusual container it should work the same as it would if it was loaded independently.
If your needs should change however, there are ways to send signals between parent frame and iframe if both pages have JS written to cooperate. There's methods using the # in URLs which can be read by the parent and don't force page reloads and I believe they share the window.resize event which can be fired manually without actually resizing the window.
UPDATE: There are far better ways to communicate between cross-domain iframes now than there used to be. Naturally you'll still require cooperating JS on both ends but you can use window.postMessage rather than triggering messages via window.resize and data after a hash symbol in the URL. That was a cool trick though.
When creating links you should have in mind to maybe use the target-attribute of the a-tag if you want to create a link for the parent window. Otherwise the new page would be loaded into the iframe.