Stopping a iframe from loading a page using javascript

Question

Is there a way in javascript of stopping an iframe in the middle of loading a page? The reason I need to do this is I have a background iframe streaming data from a web server (via a Comet style mechanism) and I need to be able to sever the connection at will.

Any ideas welcome.

Solution 1

For FireFox/Safari/Chrome you can use window.stop():

window.frames[0].stop()

For IE, you can do the same thing with document.execCommand('Stop'):

window.frames[0].document.execCommand('Stop')

For a cross-browser solution you could use:

if (navigator.appName == 'Microsoft Internet Explorer') {
  window.frames[0].document.execCommand('Stop');
} else {
  window.frames[0].stop();
}

Solution 2

The whole code should be like this, (unclenorton's line was missing a bracket)

if (typeof (window.frames[0].stop) === 'undefined'){
    //Internet Explorer code
    setTimeout(function() {window.frames[0].document.execCommand('Stop');},1000);
}else{
    //Other browsers
    setTimeout(function() {window.frames[0].stop();},1000);
}

Solution 3

Merely,

document.getElementById("myiframe").src = '';

Solution 4

Very easy:

1) Get the iframe or img you don't want to load:

let myIframe = document.getElementById('my-iframe')

2) Then you can just replace src attribute to about.blank:

myIframe.src = 'about:blank'

That's all.

---

If you wanted to load the iframe or image at a time in feature when some event happens then just store the src variable in dataset:

myIframe.dataset.srcBackup = myIframe.src
// then replace by about blank
myIframe.src = 'about:blank'

Now you can use it when needed easily:

myIframe.src = myIframe.dataset.srcBackup

View more solutions

Comments

[Richard JP Le Guen]

Not confident enough to put it as an answer, but couldn't you just direct the iframe to another url? Something like document.getElementById("myiframe").src = "http://www.example.com/not-long-polling.html";

[uss]

That was my first idea (+1), but I need the contents of the frame to be preserved.

[unclenorton]

It is probably better to check for typeof(window.frames[0].stop) instead of navigator.appName. Future IE version may support that.

[homerun]

@unclenorton i don't really get what you trying to say. you may write the condition ?

[unclenorton]

@MorSela, I am trying to say that it is better to check for a feature rather than for a browser. The condition will look like (typeof (window.frames[0].stop === 'undefined').

[ghusse]

Thanks for this answer. I agree with unclenorton : it's better to test the presence of a feature itself instead of testing the browser.

[Steve Wasiura]

Alex's example using typeof() works pefectly. upvoting that answer for others to find faster

[v42]

For those who are using jQuery, i had problems while testing the stop function, because of the jQuery method with the same name. To solve this, I used javascript dom selectors like this: document.getElementById("myId").getElementsByTagName('iframe‌​')[0]. I don't know if there's an easy alternative for this, but it does the job.

[Marged]

Please have a look at the accepted answer, I think it is quite equal to what you posted

[Nishi]

Why is setTimeout used?

[Dennis Rosenbaum]

As addition to @v42, after getting the frame, you have to target the contentWindow: var iframe = document.getElementById("myId").getElementsByTagName('iframe‌​‌​')[0].contentWindo‌​w;

[Admin]

That doesn't stop large and heavy javascript execution, like Unity WebGL Build.