AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |
Back to Blog
Iframe react4/19/2023 ![]() ![]() Otherwise the browser is rendering nothing. By definition we have to provide width and height. The browsers open just a few connections in parallel to a given web server. And because we have a limited number of connections we may block the main content. All the iframes on the page use the same connection pool. However, what third party data is blocking is the onload event. Indeed the iframe’s content is loaded in parallel with main page’s content. The most common bugs that we may encounter are layout related only. Because our page lives in a sandbox we don’t really care what’s on that dummy page. To test if our widget works we’ll probably have to create a dummy page and simply put the iframe there. This could be a disadvantage if the widget needs to be customizable but that’s another story. It’s our own page so the only ones styles that apply are coming from our own stylesheet. It’s a piece of code that we can’t contribute to and changing it means reaching every single developer that uses it. If we distribute our widget as a JavaScript snippet we are not directly controlling the injection. ![]() By using an iframe we base the injecting only on HTML rendering, not JavaScript execution.Īt some point we will need to update the widget. Now imagine that something else on the page fails before the browser reaches our JavaScript file. Imagine that we develop our awesome widget and we place it somewhere following the non-iframe solution. It’s not blocked by the main page’s JavaScript failure We may still get our page while the external content is loading. The iframe is not blocking the rendering. Of course there are always security risks but it is definitely better then including an external JavaScript that has a direct access to our DOM tree (and not only). Mainly because the JavaScript inside the iframe is running in the context of another page. The tag is considered the safer approach. The tag may seem like an ancient technology but there are some goodies: They both have pros and cons so let’s explore. So, the question is which one of the two methods fits better. There are primarily two ways of achieving this: As such it should work as expected and it should not break what’s on the page already. It’s very often a product of a another company that we inject in our own sites. ![]() A widget in the context of web development is a piece of UI that delivers additional functionality or information. ![]()
0 Comments
Read More
Leave a Reply. |