window.stop(); と同等の機能をIEで使いたい!
解決済
回答 3
投稿
- 評価
- クリップ 0
- VIEW 1,756
前提・実現したいこと
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>-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+2
setTimeoutを処理するならこうですかね
<script>
var timerId;
$(function(){
$('#time').html(Date());
$('a#stop').on('click',function(e){
clearTimeout(timerId);
$(this).toggleClass('stop');
if($(this).hasClass('stop')){
timerId=setTimeout(function(){location.reload();},2000);
}
}).trigger('click');
});
</script>
Reloaded at <span id="time"></span>
<a href="#" id="stop">Stop refresh</a>投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+2
注意事項
- リンクではない要素を
<a>でマークアップしないで下さい。 <meta http-equiv="refresh" content="2" />はJS無効でも動作しますが、clickイベントは動作しません。
コード
<span id="clock"></span>
<input id="toggle-clock" type="button" value="Stop clock" />
<script>
'use strict';
function handleTimeout (option) {
if (!option.disabled) {
this.document.getElementById('clock').textContent = new Date;
setTimeout(handleTimeout, 2000, option);
}
}
function handleClick (event) {
var input = event.target,
disabled = this.option.disabled = input.value === 'Stop clock';
input.value = disabled ? 'Start clock' : 'Stop clock';
}
var option ={disabled: false};
document.getElementById('toggle-clock').addEventListener('click', {handleEvent: handleClick, option: option}, false);
handleTimeout.call(this, option);
</script>setTimeout の第三引数
setTimeoutの第三引数はPolyfillを適用する事で、IE9でも使用可能です。
Re: bg87 さん
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
0
if ($(this).hasClass('stop')) {
try {
window.stop();
} catch {
window.document.execCommand('stop');
}
} else {
location.reload();
}とすれば、上手くいくと思います。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 87.60%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2019/01/17 12:07
ありがとうございました！