# Is it possible to have an iscroll inside iFrame?



## ajayun (Apr 29, 2011)

Hi Friends,
I have this html page in which i have some 10 different hyperlinks to external websites using anchor tags.
When these links are clicked, an iFrame loads the website within itself.
Now my requirement is, i require an iscroll(vertical and horizontal) within this iFrame, so that the user can view all the contents of these external websites.


----------



## DDAoN (Mar 19, 2011)

Hello, ajayun. An IFRAME, by default, allows scrolling. Now, when you say you need an iScroll, do you mean the project by Cubiq or just scrolling in the frame? If it's the latter, you can use:

```
<iframe src="%TARGET%">Your browser doesn't support IFRAME.  Are you using Safari?</iframe>
```
This will default to permitting scrolling within the frame. If this is what you already have, the scrolling may be prevented by CSS. This can be countered with some basic CSS to ensure the scrolling is enabled (the "scrolling" attribute has been removed in HTML5):

```
<iframe src="%TARGET%" style="overflow: scroll;">Your browser doesn't support IFRAME.  Are you using Safari?</iframe>
```
If that doesn't solve your problem, we'll need more information on what is happening, code is preferred, or, if you're situation is the former, let us know (code and errors are still preferred ^^').


----------



## ajay.un (Feb 3, 2014)

Hello Ddaon,
Yes i am speaking about the iscroll which was developed by Cubiq.
And this project is launched in a veeva kind of platform..

So we are creating this iframe so that the user doesnt leave the app.
The target app runs in the iPad.


----------



## DDAoN (Mar 19, 2011)

Alright, so the problem you're running into is that the iScroll script has to be loaded onto the page you are framing. By linking to external websites, you are tying your hands in what you can do. I'll try to explain what has to be done.
We have to pull the dimensions of the page being displayed in the IFRAME. Easy with a little jQuery, at least it would be if the page displayed were on the same domain. I'll come back to that.
Adjust the size of the IFRAME to match the full size of the page displayed.
Make steps 1 and 2 happen in a manner to account for page changes within the FRAME (there's no "good" way to do this).

All of this is relatively easy-to-do with IFRAMEs linking to other pages on the same domain. It is a security issue to permit cross-domain scripting, which is what you want to do. Most browsers prevent cross-domain scripting, but that doesn't mean it isn't possible.

Here's the iScroll example on JSFiddle, calling the JavaScript properly: Edit fiddle - JSFiddle
* Here's the iScroll example on JSFiddle, using a second JSFiddle call via an IFRAME: Edit fiddle - JSFiddle
In case you don't believe me about the IFRAME part, here's the JSFiddle for the frame: Edit fiddle - JSFiddle

* - This is the one you really want to be looking at.

Now, I've tested it in Chrome and IE11, both worked just fine. Here's the short version of the reasoning behind my changes:
IFRAMEs, even when scrolling is disabled, register as a separate window. To overcome the inability to scroll as a result of this, I added the DIV "overlay" and filled it with content (an IMG) to act as the content being scrolled, positioned the same as the IFRAME so they overlap.
I used jQuery to retrieve the height of the HTML tag of the IFRAME and apply it to the IFRAME. It was then applied to the IMG in the overlay DIV, since you can't scroll what isn't there.
Since the overlay DIV is meant for content to the browser and not the eye, it is then hidden to prevent any interference with the IFRAME, while retaining the iScroll effect.

This solution only works for same domain framing, meaning: if your domain is "example.com", the IFRAME must display another page from "example.com".

I'll look into a cross-browser adaption when I've had a little more time to work with it, but I make no promises. Cross-domain scripting is heavily frowned upon because of the potential risks, to a user, involved with doing so (you never know what someone might do with their scripts).


----------



## ajayun (Apr 29, 2011)

Thanks Ddaon..
I will check this code in sometime and get back...


----------

