Iframe no scroll install#
Iframe no scroll code#

You may have crossed paths with it when you had to include a third-party widget (like the famous Facebook like button), a YouTube video, or an advertising section on your website.įor instance, the code below will display a 500px square with the google homepage within: What is an iframe, and when do you use it?ĭevelopers mainly use the iframe tag to embed another HTML document within the current one. Finally, we’ll talk about how you can secure your iframe to avoid potential vulnerabilities. We’ll go through most of the features the iframe element provides and talk about how you use them, as well as how iframe can be useful for overcoming some tricky situations. To help you form your own opinion and sharpen your developer skills, we will cover all the essentials you should know about this controversial tag. They have many legitimate uses cases.īesides, it’s not that hard to secure them, so you won’t have to worry about your user’s computer becoming infected. I believe that their bad reputation should not prevent you from relying on them. The iframe element (short for inline frame) is probably among the oldest HTML tags and was introduced in 1997 with HTML 4.01 by Microsoft Internet Explorer.Įven though all modern browsers support them, many developers write endless articles advising against using them.

Nada also dabbles in digital marketing, dance, and Chinese. She specializes in Vue.js and loves sharing anything and everything that could help her fellow frontend web developers. Also, that would mean that only test2.htm, the enclosing page, would need to know the id attribute of the wrapper element.Nada Rifki Follow Nada is a JavaScript developer who likes to play with UI components to create interfaces with great UX. That would remove the objection that if you have a single page with an iframe, that may display up to 100 pages inside the iframe, 100 pages need this new code added (In our case, the 100 pages are built using the same code that will be able to add the needed code automatically).

Iframe no scroll install#

I think that since the 2 pages come from the same server, it may be possible to install the event handlers from test2.htm, even though they have to be attached to elements in test1.htm - I just haven't had the chance to try that yet. Also, the example code is code that I found somewhere in the web, but I can't remember where or I'd give the author credit. I'm kinda hoping that the ideas in these files can be incorporated into iScroll 4 to make scrolling more intuitive. Note the following: 1) I'm almost positive that both files have to be served from the same server, or at least the same domain, 2) test1.htm needs to know the id of the element that will contain the iframe in test2.htm ('second' in this case), 3) the scrolling is a bit jerky and there is no movement after you remove your finger from the screen ('inertia', I think it's called). The second, test2.htm, is the one you want to display in your browser, and contains an upper fixed positioned div, and a lower fixed positioned div which contains an iframe. The first, test1.htm, contains the content to be displayed in the iframe. So, I've attached 2 files - test1.htm and test2.htm.

the page displayed inside the iframe) that causes the wrapper element - the one in the enclosing page which itself contains the iframe, to scroll the iframe.

My solution is to embed JavaScript in the embedded page (i.e. I have a solution that may not be considered good enough, but it might lead to an even better solution. I've seen this before and I believe it is intended behavior. I believe that the main problem with getting iScroll to work for iframes is that the events (touchstart, touchmove, touchend) are generated in the page contained in the iframe, and although those events 'bubble up' through the DOM, they don't bubble up past the iframe boundary.