私はウェブサイトを持っています。そこでは、Ajaxを使用して、ページをリロードせずにページ上のいくつかのものを更新しようとしています。ただし、多くのユーザーがJavascriptをサポートしていないモバイルブラウザを使用する可能性が高いため、Javascriptを使用していないユーザーに対してのみ機能するメタリフレッシュタグを使用してページを設計しようとしています。これを行う方法はありますか?
タグをnoscript要素内に配置しようとしましたが、基本的な携帯電話のブラウザーがそれを認識しませんでした。ユーザーのブラウザがJavascriptをサポートしているかどうかを記憶するために、Cookieを設定するか、Javascriptなしで機能するページの1つのバージョンを用意し、Javascriptを使用してユーザーをより洗練されたバージョンにリダイレクトしようと考えていますが、そこにあるのではないかと思います。それを行うためのよりエレガントな方法です。誰かアイデアはありますか?
Noscriptタグがこれに非常にうまく機能することがわかりました。たとえば、これを直後に配置できますclose head element:
<noscript>
<meta http-equiv="refresh" content="5;URL=http://www.example.com">
</noscript>
スクリプトをサポートしているブラウザはnoscript要素内のすべてを無視するため、スクリプトでメタタグを削除する必要はありません。
JavaScriptでメタリフレッシュタグを上書きすることはできません。
しかし、あなたはこれを行うことができます
あなたのページが->にあるとしましょう
http://example.net/mike.html そこに次のコードを入れてください->
<script type="text/javascript">
window.location = 'http://example.net/mike/for_Those_With_JavaScript_Enabled.html';
</script>
残念ながら、 @ bluesmoonの回答 から、DOMの操作は機能しなくなりました。
回避策は、元のマークアップを取得し、メタリフレッシュ要素を見つけて置換してから、置換されたマークアップを使用して新しいドキュメントを書き込むことです。
XMLHttpRequest
を使用して追加のリクエストを送信する以外は、JavaScriptを使用して元のマークアップを取得する方法がわかりません。
Operaでは、これが私が使用しているものです:
Disable meta refresh 1.00.js
:
// ==UserScript==
// @name Disable meta refresh
// @version 1.00
// @description Disables meta refresh.
// @namespace https://stackoverflow.com/questions/3252743/using-javascript-to-override-or-disable-meta-refresh-tag/13656851#13656851
// @copyright 2012
// @author XP1
// @homepage https://github.com/XP1/
// @license Apache License, Version 2.0; http://www.Apache.org/licenses/LICENSE-2.0
// @include http*://example.com/*
// @include http*://*.example.com/*
// ==/UserScript==
/*
* Copyright 2012 XP1
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.Apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/*jslint browser: true, vars: true, maxerr: 50, indent: 4 */
(function (window, XMLHttpRequest) {
"use strict";
if (window.self !== window.top) {
return;
}
window.stop();
var uri = window.location.href;
var request = new XMLHttpRequest();
request.open("GET", uri, false);
request.send(null);
if (!(request.readyState === 4 && request.status === 200)) {
return;
}
var markup = request.responseText;
markup = markup.replace(/<meta http-equiv="refresh".*\/?>/gi, "");
var document = window.document;
document.open();
document.write(markup);
document.close();
}(this, this.XMLHttpRequest));
Operaには、メタリフレッシュを無効にする機能も組み込まれています。 JavaScriptは必要ありません。
この場合、メタタグはひどいです。検索エンジンはどうですか?
あなたがすべきことは、私が概説したようなものにすることですここ。リンクは、Web2.0ページであるかのように完全に機能するサイトを指している必要があります。次に、イベントハンドラー(onclick)を使用して、ajaxを使用してユーザーエクスペリエンスを向上させます。
そのため、ajaxユーザーはリンクに移動せず、リンクをクリックすると処理され、まったく同じURLにajaxGETパラメーターを使用してajaxリクエストが送信されます。
サーバー側では、なんらかの方法でサイト全体を生成できる必要があります。 ajaxリクエストの場合は、関連するコンテンツを送信します。 ajaxリクエストでない場合は、関連する部分を含む完全なサイトを生成しますembedded。
あなたのサイトはSEOフレンドリー、利用可能モバイルユーザー向け、そしてプログレッシブエンハンスド最新のブラウザやプラットフォームのユーザー向けになります。最後に、ajaxで生成されたハッシュリンクは、リンクとしても使用できます。
素晴らしい。 :)
Javascriptでメタタグを削除するだけです:
<meta http-equiv="refresh" content="2;http://new-url/" id="meta-refresh">
<script type="text/javascript">
var mr = document.getElementById("meta-refresh");
mr.parentNode.removeChild(mr);
</script>
例として、上記の2秒に更新タイムアウトを設定しました。おそらく1秒で逃げることもできますが、その場合はjavascriptを実行する機会がないため、0に設定しないでください。 0は、戻るボタンの使いやすさを損なうため、煩わしいものでもあります。
2012-10-23を編集これはもう機能していないようです。ノードは引き続き削除されますが、ブラウザはすべてのメタタグを解析してメモリに保持しているようです。
これは私にとって素晴らしい働きをしました! (クロムで試してみました)
window.stop();
ここでは、メタリフレッシュが正しい方法ではないことに同意します。 galambalazsのリンクに加えて、「プログレッシブエンハンスメント」で検索してください。
ただし、質問に答えるという精神で、次のことを試すことができます。これはテストされておらず、すべてのブラウザで機能するとは限りませんが、正しい方向に沿っている必要があります。
var i, refAttr;
var metaTags = document.getElementsByTagName('meta');
for i in metaTags {
if( (refAttr = metaTags[i].getAttribute("http-equiv")) && (refAttr == 'refresh') ) {
metaTags[i].parentNode.removeChild(metaTags[i]);
}
}
それを削除すると、ブラウザが時間内に更新されなくなるかどうかは不明です。
これは私が使用しているものの例であり、(特にFirefoxで)完全に機能します!
<html><head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Redirecting</title>
</head>
<body onload="location.replace('http://www.live.comeseetv.com'+document.location.hash)">
<a href="http://www.live.comeseetv.com">Redirecting you to http://www.live.comeseetv.com</a>
</body></html>