CODEWITHSUNDEEP
javascripthtmlweb-applications
FeleMed
FeleMed

Reputation: 621

How to disable browser respone inside iframe but not in the main page

How to disable browser respone inside iframe, but leaving the main page responding normally.

As seen in the picture below, this is my case, I've been trying to make the web inside the iframe unreponsive to drag-scrolling and to double-tap-zoom and stuff like that, cause my web inside the iframe will detect the position of the finger and move an object along (i.e. moving the base in arkanoid or moving one de rectangles in pong).

So far I've tried stuff like:

1)

document.addEventListener("touchstart", function(evt){evt.preventDefault();}, false);

2)

document.addEventListener("touchstart", function(){return false;}, false);

The green area should respond, but the red one shouldn´t.

Example

Until now none of them seem to work, since still the browser responding to the input remains variable, somtimes it will stay put and drag the object inside the iframe and sometimes it will scroll the whole webpage.

I have to add that my code must be inside the iframe and not in the main webpage that contains the iframe.

Best regards.

Upvotes: 2

Views: 6146

Answers (1)

Esailija
Esailija

Reputation: 140238

In the iframe you could use this css:

html, body {
    pointer-events: none;
}

See demo: http://jsfiddle.net/vU4GB/1/. Works only in Firefox and Chrome though.

Upvotes: 3

Related Questions