使用 Javascript 覆盖或禁用元刷新标签

Posted 2023-02-21

【中文标题】使用 Javascript 覆盖或禁用元刷新标签

【英文标题】：Using Javascript to override or disable meta refresh tag

【发布时间】：2011-03-16 05:29:57

【问题描述】：

我有一个网站，我正在尝试使用 Ajax 来更新页面上的一些内容，而无需重新加载它。但是，我的许多用户很有可能会使用不支持 javascript 的移动浏览器，因此我正在尝试使用元刷新标签设计页面，以某种方式仅适用于没有 Javascript 的用户。有没有办法做到这一点？

我尝试将标签放在 noscript 元素中，但我的原始手机浏览器无法识别它。我正在考虑设置一个 cookie 来记住用户的浏览器是否支持 Javascript，或者有一个没有 Javascript 的页面版本，并尝试使用 Javascript 将用户重定向到更复杂的版本，但我想知道是否有是一种更优雅的方式。有人有什么想法吗？

【问题讨论】：

我想我从这个问题中了解到，我正在尝试做的是很多麻烦，可能不值得花精力去处理所有问题。我想我可能会像 Hrishi 建议的那样重定向，或者如果我希望 Javascript 和非 Javascript 页面使用相同的 URL，我可能只在用户选择启用它们时使用元刷新标签，并使用 cookie 记住用户的选择。感谢您的所有回答。

【参考方案1】：

我发现 noscript 标签非常适合这个。例如，您可以在 close 头部元素之后放置它：

<noscript>
    <meta http-equiv="refresh" content="5;URL=http://www.example.com">
</noscript>

不需要删除带有脚本的元标记，因为支持脚本的浏览器会忽略 noscript 元素内的所有内容。

【讨论】：

你能提供更多关于你使用的细节吗？我已在多个网站上成功使用此功能，并在许多桌面和移动浏览器上进行了测试。

【参考方案2】：

您不能使用 JavaScript 覆盖元刷新标记。

你可以这样做

假设您的页面位于 ->

http://example.net/mike.html 把下面的代码放在那里->

<script type="text/javascript">
window.location = 'http://example.net/mike/for_Those_With_JavaScript_Enabled.html';
</script>

【讨论】：

我的意思是重定向禁用 JavaScript 的浏览器，您可以重定向启用 JavaScript 的浏览器。

这很聪明。它干净、简单，可以解决问题。

这会与后退按钮混淆。启用 javascript 的用户单击后退按钮将陷入重定向循环。他们需要双击后退按钮才能退出。

调整后退按钮使用javascript修改浏览器历史记录

这个答案部分不正确。如果您执行window.onbeforeunload = function() return 'test' ;，您可以弹出一个窗口并单击“留在此页面”以中止刷新。从用户体验的角度来看，这是一个糟糕的选择，但它是一种阻止刷新的技巧。

【参考方案3】：

不幸的是，从 @bluesmoon's answer 开始，操作 DOM 不再起作用。

解决方法是检索原始标记，找到并替换元刷新元素，然后使用替换的标记编写新文档。

除了使用XMLHttpRequest 发送附加请求外，我不知道如何使用 JavaScript 检索原始标记。

在 Opera 中，这是我正在使用的：

Disable meta refresh 1.00.js:

// ==UserScript==
// @name Disable meta refresh
// @version 1.00
// @description Disables meta refresh.
// @namespace https://***.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。

右键单击网页>编辑站点首选项...>网络>禁用“启用自动重定向”>确定。

【讨论】：

将不得不对此进行测试。谢谢！

【参考方案4】：

这对我来说太棒了！ （在 chrome 中试过）

window.stop();

【参考方案5】：

在这种情况下，元标记很糟糕。搜索引擎呢？？

你应该做的是让它像我概述的那样here。 您的链接应该指向完整的工作站点，就好像它是一个 web 2.0 页面一样。然后使用事件处理程序 (onclick)，您可以使用 ajax 来增强用户体验。

所以 ajax 用户不会转到链接，而是在单击链接时处理链接并将 ajax 请求发送到完全相同的 url 但带有 ajax GET 参数。

现在在服务器端，您必须能够通过某种方法生成整个站点。如果是 ajax 请求，则发送相关内容。如果不是 ajax 请求，则生成完整的站点，其中包含相关部分嵌入。

您的网站将SEO 友好，可供移动用户使用，并且逐步增强适合现代浏览器和平台上的用户。最后，ajax 生成的哈希链接将可用，即使作为链接。

真棒。 :)

【讨论】：

元标签有多糟糕？我不是想用它们来重定向。我只是用它们来刷新页面，作为不支持 Javascript 的用户的后备。我看不出这会如何影响搜索引擎。我不完全确定这是否是我想要做的，但我仍然很好奇我会怎么做。

你不知道该怎么做，对你来说还不够吗？ :) 你检查过链接吗？？？

我检查了链接。使我的服务器上的代码复杂化以两种方式提供数据似乎有点棘手。如果我这样做，我将不得不处理一些怪癖。如果我将 URL 的重要部分放在 # 符号之后，并且有人将该页面添加为书签并尝试访问它，则除非我有一些 JS 来加载内容，否则它将不会像往常一样加载。如果用户点击后退按钮，同样的事情。我不确定搜索引擎以这种方式制作我的网址是否有益。他们可能会看到 # 并认为它只是指向同一页面不同部分的链接。我认为使用元刷新标签可能更简单。

你还没有读过我的帖子 :)) 网址应该指向完整的工作站点而不是哈希。 事件处理程序是附在链接上。他们将发出 ajax 请求并更改 url 中的哈希值。如果您已完整阅读它，您就会知道当有人从外部访问它们时，ajax 生成的 url 正在工作。它是在服务器端而不是在客户端处理的。这个例子甚至证明了这一点。下次请仔细阅读...

【参考方案6】：

只需使用 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 秒，但不要将其设置为 0，因为在这种情况下 javascript 将没有机会执行。 0 也很烦人，因为它破坏了后退按钮的可用性。

编辑 2012-10-23 这似乎不再起作用。该节点仍会被删除，但似乎浏览器会以任何方式解析所有元标记并将其保存在内存中。

【讨论】：

这行得通吗？也许浏览器变得更严格了，似乎不再起作用了。可惜

@Timothy 解决方法是检索原始标记，找到并替换元刷新元素，然后用替换的标记编写新文档。看我的回答：http://***.com/questions/3252743/using-javascript-to-override-or-disable-meta-refresh-tag/13656851#13656851。

我没有对此进行测试，但从理论上讲，我认为这行不通。元刷新使用 http-equiv 元标记来模拟 Refresh HTTP 标头，因此也可以由 HTTP Web 服务器作为标头发送。由于 js 是在响应发送之后来的，所以重定向头早就没有了

@AlinMirceaCosma 该问题涉及标记中包含的“标签”，而不是 HTTP 标头。只要标记包含元刷新，而不是作为标题，如果 JavaScript 有时间执行，元刷新就可以被移除。

【参考方案7】：

我同意元刷新在这里不是正确的方法。除了 galambalazs 的链接，搜索“progressive enhancement”。

但是，本着回答问题的精神，您可以尝试以下方法。它未经测试，可能不适用于所有浏览器，但应该是正确的：

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]);
    

删除它是否会阻止浏览器及时刷新还有待观察。

【讨论】：

元标签不能被 JavaScript 覆盖。

我在 Firefox 中尝试过（将“i in metaTags”放在括号中之后）。我收到一个 Javascript 错误，提示“metaTags[i].getAttribute”。我想这是做不到的，至少不能那样做。

你不能在这里使用 for(i in ...) 循环。 in 运算符遍历对象的键。在这种情况下，您需要使用常规数字循环：for(i=metaTags.length-1; i>=0; i--) ... 您向后迭代，因为 removeChild 会改变 metaTags.length

【参考方案8】：

这是我使用的一个示例，它运行良好（尤其是在 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>