2020-01-23
2990
Nada Rifki
12904
Jan 23, 2020 ⋅ 10 min read

The ultimate guide to iframes

Nada Rifki Nada is a JavaScript developer who likes to play with UI components to create interfaces with great UX. She specializes in Vue.js and loves sharing anything and everything that could help her fellow frontend web developers. Nada also dabbles in digital marketing, dance, and Chinese.

Recent posts:

Using Aws Lambda And Aws Cloudfront To Optimize Image Handling

Using AWS Lambda and CloudFront to optimize image handling

Leverage services like AWS Lambda, CloudFront, and S3 to handle images more effectively, optimizing performance and providing a better UX.

Nitish Sharma
Apr 12, 2024 ⋅ 12 min read
Building Web-Based Terminal Components With Termino.js

Building web-based terminal components with Termino.js

Explore Termino.js, an open source library for integrating web-based terminals into applications, in this introduction article.

Chibuike Nwachukwu
Apr 11, 2024 ⋅ 6 min read
How To Build A Custom Gpt: Step By Step Tutorial

How to build a custom GPT: Step-by-step tutorial

Let’s see why and how to build custom GPTs — personalized versions of ChatGPT that act as custom chatbots to serve a specific purpose.

Peter Aideloje
Apr 10, 2024 ⋅ 7 min read
Jest Adoption Guide: Overview, Examples, And Alternatives

Jest adoption guide: Overview, examples, and alternatives

Jest is feature-rich testing framework that comes with several in-built features that make it powerful and easy to use.

Ibiyemi Adewakun
Apr 9, 2024 ⋅ 12 min read
View all posts

45 Replies to "The ultimate guide to iframes"

  1. You talked nothing about “friendly iframe” when the iframe source is and that we do not need to send message events as those iframes can get all functionality from the parent window object…

  2. Thank you, Nada, for this informative article! A helpful addition would be addressing accessibility issues with iframes.

  3. There is a lot to be said about WCAG conformance an iframes. Technique H64: Using the title attribute of the frame and iframe elements (https://www.w3.org/TR/WCAG20-TECHS/H64.html) addresses how this applies to WCAG Success Criteria 2.4.1 Bypass Blocks (level A) and 4.1.2 Name, Role, Value (level A). While conformance is more nuanced than a pass/fail, at least acknowledging the challenge and risk of being flagged by automated accessibility testing tools should be in this article.

  4. I have a question.

    I’m using an iframe to load a media file. Click the link to the file and it loads into the named iframe.

    My link has a target=”media” attribute on it and the first video loads fine. However when I try to load the second video it will not load in the iframe, it loads in a new tab.

  5. Just wondering how you got the google.com example to work. I get a “Blocked by X-Frame -Options Policy” for google, and “Blocked by Content Security Policy” for some other domains that I tried, But the Twitter button and the Logrocket examples work fine. I am using localhost/ 127.0.0.1 for testing, which might be the issue.

  6. I have a lot of content on my site, and I recently implemented the use of (loading=”lazy”) to defer the loading of an iframe until the viewer opens the window. I noticed that it did not interfere with the laoding of the iframe content, however, the code was flagged as “not allowed” when validating my html. I also noticed that when using speed testing sites such as Google insights and GTMetrics, the browser is seeing and loading the content within the iframe even though I am using the lazy loading tag in the iframe?

  7. Hi, thanks for this guide, really interesting. You wrote “Because an iframe offers an isolated environment, this means that the focus or the selection is never lost when you are clicking outside of it.”
    I am actually facing a situation where my iFrame is losing its focus when clicking elsewhere… Any way to prevent that ?

  8. Hi, thanks for this comprehensive iframe documentation , But frankly , I was looking for an answer to a difficult question , a question that no one online , even the Top Programming websites , could answer it till now ..
    This question is , how can we play a video game inside iframe , without the keyup or keydown forcing the whole page to scroll up or down , instead of focusing inside the iframe ?

  9. Hi,
    Thanks for this excellent information with unique content and it is very useful to know about the information based on comprehensive iframe documentation.

  10. thx Nada – I really like the overview quality of your article.
    if I integrate content via iFrame into a WP page is there a way I can avoid thrd parties to open the iFrame content without opening the complete page?

  11. Can you please tell me how we can display a PDF file inside the iframe html element without download & print option in the frame window?

  12. For some you can’t use external resources from iframe using a development server, especially when trying to fetch resources from Google. As a security measure google doesn’t allow that… hence a development server with a “localhost” in it’s domain is automatically blocked. There is a way to trick the system by changing your “localhost” domain or using https, I read somewhere tho I never actually tried it before just a friendly coder who stumbled on this article to learn more about iFrames.

  13. Hello. Great post. I had a question about using iframe and jump links together. I am building a recipe site with a list of links to recipes from different sites. When the links are clicked the recipes are displayed within the iframe window at the top of the same page. I wanted to add jump links so the user to taken to the top of the page where the recipe is being displayed. Any suggestions?

  14. Great Article Nada – well done. I came to the sight to get some information on how cookies work within an iframe. I’m using .Net Core 2.2. and application (session) cookies are not being recognized in the same way as if the application runs outside the iframe. Any insight on cookie limitations and using sameSite=None/Lax/Strict (etc), and the meaning of these would be a great add to your article.

    Cheers!

  15. im trying to add a iframe into elementor on wordpress and i cannot figure out to adjust the height, there is also a rule for scrolling in a an iframe i didnt see that here.

  16. I wrote a set of pages a while ago. In fact last changed 2011! Now I am trying to resurrect them. But they were built around frameset(s) and frame(s) – I did write a kind of “file explorer”. I can work out what to change. But the main problems is how to move the iframe to be along the right, e.g. width=85% but I can’t see (in several different pages) how to have the iframe set right. I’ve seen talk of attribute object-position, but I can’t how to work it.

    Help!

  17. I’ve done all I want, almost…(I worked out the rightside by using tables).

    Something like file explorer but with my photos across the world.

    I insert one (one of a number of pages) into the right side. On its own it’s fine, but inside an iframe, it does allow js. OK with variable but not OK with fumctions. I guess this tweaking some kind of attribute I need to use, but I can’t hack it.
    Help
    —–

    All I have to do after that is visibility:collapse

    And add or the places I travelled – mostly China / SE Asiia; and Europe. About 50000 photos, only about 1000 for this album.

  18. Great overview!

    Regarding security – please note that it’s considered unsecure to specify the origin domain as a wildcard (*) in your example – postMessage(‘message’, ‘*’).
    It’s best to be specific about the domains used for communications to prevent unwanted information discolusre/XSS attacks.

    I wrote a library that simplify communication between frames – it’s called iFramily (https://github.com/EkoLabs/iframily).
    Basically it has a simpler API than postMessage, which includes Promise-based responses, message queuing, and managing the connection until both frames are ready to talk. It also takes a responsible approach to security…

    Would love to hear your thoughts!

  19. I am planning to embed a third party survey url as a source to my modal window iframe. I want the user to take that survey only once and want to prevent view source or inspect element to show up the src somehow. Or at least want to make it obscure and unreadable. I tried setting it via JavaScript and I obfuscated the js setting this src but still after load of the iframe, src is viewable in plain text which earlier was set to unknown. Any help in securing the survey link?

  20. @Nada Rifki
    Is there any way to get the text from click inside iframe.
    Explaination: I have an iframe on my page using window.getSelection() i get the selected text, similarly i want to get the selected text from iframe.
    Can we do that? if yes how?

Leave a Reply