window.stop(); と同等の機能をIEで使いたい!

前提・実現したいこと

metaで定期的にサイトリフレッシュさせたいのですが、
テキストリンクをクリックでリフレッシュ機能を止めたり、動かしたいと思っています。

発生している問題

Chromeで2秒ごとに時計が更新されるようにしているのですが、
テキストリンクをクリックすると時計が止まり、もう一度クリックすると動きます。
しかし、IEで上記を確認すると時計が止まりません。。

ネットで情報を探し、window.stop();がそもそもIEでは使えないということなので、
document.execCommand('Stop');を使うということまではわかっているのですが、
素人のため、javascriptの書き方もわからず困っています。

補足情報

IE9対応がマストになります。

そもそももっと良い方法があるのでしょうか。。
ご存知でしたら、教えていただきたいです。

試したこと

下記ソースをご確認ください。

<html>
<head>
<title>Test</title>
<meta charset="UTF-8" />
<meta http-equiv="refresh" content="2" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
  $('a').click(function(e){
    $(this).toggleClass('stop');
    if($(this).hasClass('stop')){
        window.stop();
    } else {
        location.reload();
    }
  });
});
</script>
</head>

<body>

Reloaded at <span id="time"></span>
<script>
document.getElementById("time").innerHTML = Date();
</script>

<a href="#">Stop refresh</a>

</body>
</html>

行動規範の内容に同意します

回答3件

ベストアンサー

setTimeoutを処理するならこうですかね

javascript
1<script>
2var timerId;
3$(function(){
4  $('#time').html(Date());
5  $('a#stop').on('click',function(e){
6    clearTimeout(timerId);
7    $(this).toggleClass('stop');
8    if($(this).hasClass('stop')){
9      timerId=setTimeout(function(){location.reload();},2000);
10    }
11  }).trigger('click');
12});
13</script>
14Reloaded at <span id="time"></span>
15<a href="#" id="stop">Stop refresh</a>

投稿2019/01/16 01:06

yambejp

総合スコア117921

bg87

2019/01/17 03:07

一番イメージに近い動きができましたので、ベストアンサーにさせていただきました！ありがとうございました！

行動規範の内容に同意します

注意事項

リンクではない要素を <a> でマークアップしないで下さい。
<meta http-equiv="refresh" content="2" /> はJS無効でも動作しますが、clickイベントは動作しません。

コード

toggle-clock - JSFiddle

HTML
1<span id="clock"></span>
2<input id="toggle-clock" type="button" value="Stop clock" />
3<script>
4'use strict';
5function handleTimeout (option) {
6  if (!option.disabled) {
7    this.document.getElementById('clock').textContent = new Date;
8    setTimeout(handleTimeout, 2000, option);
9  }
10}
11
12function handleClick (event) {
13  var input = event.target,
14     disabled = this.option.disabled = input.value === 'Stop clock';
15
16  input.value = disabled ? 'Start clock' : 'Stop clock';
17}
18
19var option ={disabled: false};
20document.getElementById('toggle-clock').addEventListener('click', {handleEvent: handleClick, option: option}, false);
21handleTimeout.call(this, option);
22</script>

setTimeout の第三引数

setTimeoutの第三引数はPolyfillを適用する事で、IE9でも使用可能です。

WindowOrWorkerGlobalScope.setTimeout() | MDN

Re: bg87 さん

投稿2019/01/14 06:19

編集2019/01/14 15:41

think49

総合スコア18194

kei344

2019/01/14 14:58

質問文に「IE9対応がマスト」とあるのでconstは使えないのでは。

think49

2019/01/14 15:50 編集

ありがとうございます。確かにそうですね。親記事を修正しました。 http://kangax.github.io/compat-table/es6/#test-const (setTimeout の第三引数はPolyfillで)

bg87

2019/01/14 16:45

IEでも止まることが確認できました！！丁寧にご説明いただきありがとうございます。ただ、、もし可能でしたらもう一度クリックで動いてくれるとありがたいのです。。本当に素人なものでして… どこをいじれば再び動くようになりますでしょうか。。

行動規範の内容に同意します

javascript
1if ($(this).hasClass('stop')) {
2    try {
3        window.stop();
4    } catch {
5        window.document.execCommand('stop');
6    }
7} else {
8    location.reload();
9}

とすれば、上手くいくと思います。

投稿2019/01/13 15:05

noka_blank

総合スコア252

bg87

2019/01/14 04:44

ご回答ありがとうございます！ catchだけですとエラーが出てしまったみたいなので、下記のようにしてみたのですが、 IEで確認するとまだ動いてしまっています。。 metaでリフレッシュしているのがまずいんですかね・・・ $(function(){ $('a').click(function(e){ $(this).toggleClass('stop'); if ($(this).hasClass('stop')) { try { window.stop(); } catch(exception) { window.document.execCommand('stop'); } } else { location.reload(); } }); });

行動規範の内容に同意します

あなたの回答