Prevent Iframe Stealing

How to prevent an iframe from stealing drop event from parent container?

You're going to have to disable mouse events on the iframe. You can stop them from happenning with pointer-events: none which is pretty supported: https://caniuse.com/#feat=pointer-events

I forked your demo to show you: https://codepen.io/anon/pen/dmPRqg?page=1&

I didn't wire up anything to actually toggle the mouse events, you can do that via a class or directly to the style or any other several ways.

Prevent iFrame from getting focus when its src has an id

The sandbox attribute solved my problem

Prevent iframe stealing

With JavaScript you can do

if(window.top==window){
 //not inside iframe
} else {
    if(parent.parent.someFunction){
       parent.parent.someFunction();
    } else {
       alert("framing is not allowed")
    }
}

OR

if (window.top !== window.self) window.top.location.replace(window.self.location.href);

Some modern browsers also support the X-FRAME-OPTIONS header, that can have two values:

* DENY – prevents the page from being rendered if it is contained in a frame
* SAMEORIGIN – same as above, unless the page belongs to the same domain as the top-level frameset holder.

Browsers that support the header:

* IE8 and IE9
* Opera 10.50
* Safari 4
* Chrome 4.1.249.1042
* Firefox with NoScript

Remove focus from Iframe on page load

if assumed the iframe is not served from the same domain.. you can place any other focusable dom element after the iframe in the footer with autofocus set as true. And if that does not work please try the following in the parent main window:

$(window).on('load', function() {
    setTimeout(function(){$("body").focus()}, 100);
};

OR going by vanilla JS

window.onload = function() {
    document.getElementById("some-focusable-element-from-parent-window").focus();
};

Prevent child iFrame to get focus

It depends upon what you're really trying to accomplish and which focus methods you are trying to prevent. There's no magic setting you can set that prevents focus going to an iframe.

1. You can put a transparent element over the top of the iframe and have it capture all clicks so nothing in the iframe is clickable. You can likely just position this with CSS and wouldn't necessarily need javascript unless the iframe size is dynamic or not known in advance. This won't prevent javascript code from setting focus to the iframe, but will prevent mouse clicks from moving the focus to the iframe.

2. You can regularly check (javascript polling) where focus is and if it's not in your own document, then put it back in your document. This is kind of a hack.

Here's a demo of the first option: http://bit.ly/10jzdlp

Prevent iframe from keeping focus using jquery

Your issue seems to be two-fold.

1. You are using setTimeout which will only run your callback once. I think you mean to use setInterval, which will repeatedly run the callback.

2. You can't set focus to document using the focus method natively or in jQuery. In order to restore focus to the body, you should call the blur method on the currently active element using document.activeElement.

Example:

function focusit(){
    if(document.activeElement)
    {
        document.activeElement.blur();
    }
}
setInterval(focusit, 100);

CodePen Demo

Iframe stealing mouse events

Mouse events are tied to windows, iframes are windows. Its a miracle this works in webkit browsers as you say.

You need to pass the eventListener and perhaps eventHandler between your parent window and the iframes when the mouse moves into them.

Some reference about passing objects between iframes: http://www.dyn-web.com/tutorials/iframes/refs.php.

---

Related Topics