26

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.

Konrad
  • 39,751
  • 32
  • 78
  • 114
  • 1
    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";` – Richard JP Le Guen Feb 05 '10 at 13:45
  • 1
    That was my first idea (+1), but I need the contents of the frame to be preserved. – Konrad Feb 05 '10 at 13:58

6 Answers6

33

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();
}
Chris Van Opstal
  • 36,423
  • 9
  • 73
  • 90
  • 15
    It is probably better to check for `typeof(window.frames[0].stop)` instead of `navigator.appName`. Future IE version may support that. – unclenorton Jul 10 '11 at 13:34
  • @unclenorton i don't really get what you trying to say. you may write the condition ? – homerun Feb 14 '12 at 01:17
  • 6
    @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')`. – unclenorton Mar 01 '12 at 06:22
  • 1
    Thanks for this answer. I agree with unclenorton : it's better to test the presence of a feature itself instead of testing the browser. – ghusse Mar 12 '12 at 09:29
  • 1
    Alex's example using typeof() works pefectly. upvoting that answer for others to find faster – Steve Wasiura Jul 23 '12 at 19:43
  • 2
    For those who are using jQuery, i had problems while testing the `stop` function, because of the [jQuery method with the same name](http://api.jquery.com/stop/). 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. – v42 Jul 24 '12 at 19:33
  • As addition to @v42, after getting the frame, you have to target the contentWindow: `var iframe = document.getElementById("myId").getElementsByTagName('iframe‌​')[0].contentWindow;` – Dennis Rosenbaum May 11 '17 at 11:54
13

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);
}
Alex
  • 139
  • 1
  • 2
1

Merely, 

document.getElementById("myiframe").src = '';
devside
  • 2,171
  • 1
  • 19
  • 23
  • 1
    That doesn't stop large and heavy javascript execution, like Unity WebGL Build. –  Jun 11 '18 at 17:11
1

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
CommonSenseCode
  • 23,522
  • 33
  • 131
  • 186
0

If you only have a reference to the element, you need to use .contentX to get the document/window to run the accepted answer.
Checking that the iframe actually has a document is also necessary for dynamically added iframe elements.

function stopIframe(element) {
    var doc = element.contentDocument;
    //iframes wont have a document if they aren't loading/loaded
    //check so JS wont throw
    if (!doc)
        return;

    //try for modern browsers
    if (doc.defaultView.stop)
        doc.defaultView.stop();
    //fallback for IE
    else
        doc.execCommand('Stop');
}
Hashbrown
  • 12,091
  • 8
  • 72
  • 95
-2

not support in IE

<script>
function stopit() {
window.stop();

};
</script>


<a href="#" onclick="stopit()" class="Stop" title="Stop"></a>
Shakir K Moideen
  • 5