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

发布于 2024-09-10 03:28:04 字数 306 浏览 6 评论 0原文

我有一个网站,我尝试使用 Ajax 更新页面上的一些内容而不重新加载它。但是,我的许多用户很可能会使用不支持 Javascript 的移动浏览器,因此我尝试使用元刷新标记设计页面,该标记仅适用于没有 Javascript 的用户。有什么办法可以做到这一点吗?

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

I have a website, where I am trying to use Ajax to update some stuff on the page without reloading it. However, there is a good chance that many of my users will be using mobile browsers that don't support Javascript so I am trying to design the page with meta refresh tags, that somehow work only for users without Javascript. Is there any way to do this?

I tried putting the tag within a noscript element, but my primitive cell phone browser wouldn't acknowledge it. I am thinking of maybe setting a cookie to remember if the user's browser supports Javascript, or having one version of the page that works without Javascript, and tries to use Javascript to redirect the user to a more sophisticated version, but I am wondering if there is a more elegant way to do it. Does anyone have any ideas?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(8

泪是无色的血 2024-09-17 03:28:04

我发现 noscript 标签对此非常有效。例如,您可以将其放置在关闭 head 元素之后:

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

无需删除带有 script 的元标记,因为支持脚本的浏览器将忽略 noscript 元素内的所有内容。

I've found that the noscript tag works quite nicely for this. For example, you can place this just after you close the head element:

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

No need to remove the meta tag with script, since a browser that has script support will ignore everything inside the noscript element.

岁月苍老的讽刺 2024-09-17 03:28:04

您无法使用 JavaScript 覆盖元刷新标记。

但是您可以这样做

假设您的页面位于 ->

http://example.net/mike.html
将以下代码放在那里->

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

You cannot override meta refresh tag with JavaScript.

However you can do this

Suppose your page is at ->

http://example.net/mike.html
Put the following code there->

<script type="text/javascript">
window.location = 'http://example.net/mike/for_Those_With_JavaScript_Enabled.html';
</script>
意中人 2024-09-17 03:28:04

不幸的是,来自 @bluesmoon 的回答 ,操作 DOM 不再起作用了。

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

除了使用 XMLHttpRequest 发送附加请求之外,我不确定如何使用 JavaScript 检索原始标记。

在 Opera 中,我正在使用以下内容:

禁用元刷新 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。

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

Unfortunately, from @bluesmoon's answer, manipulating the DOM does not work anymore.

The workaround is to retrieve the original markup, find and replace the meta refresh element, and then write the new document with the replaced markup.

I am not sure how to retrieve the original markup using JavaScript except for sending an additional request using XMLHttpRequest.

In Opera, here is what I am using:

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 also has a built-in feature that disables meta refreshes. No need for JavaScript.

  • Right click on webpage > Edit Site Preferences... > Network > Disable "Enable automatic redirection" > OK.
猫烠⑼条掵仅有一顆心 2024-09-17 03:28:04

在这种情况下,元标签很糟糕。那搜索引擎呢??

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

因此,ajax 用户不会访问链接,而是在单击链接时进行处理,并将 ajax 请求发送到完全相同的 url,但使用 ajax GET 参数。

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

您的网站将SEO 友好可供移动用户使用,并针对使用现代浏览器和平台的用户逐步增强。最后,ajax 生成的哈希链接将可用,甚至作为链接。

令人敬畏。 :)

Meta tags are awful in this case. What about search engines??

What you should do is to make it something like I've outlined here.
Your links should point to full working sites as if it were a web 2.0 page. Then with event handlers (onclick) you enhance the user experience by using ajax.

So ajax users will not go to links, the link is rather processed when clicked and sent an ajax request to the exact same url but with an ajax GET parameter.

Now on the server side you have to be able to generate the whole site by some method. If it is an ajax request you send the related content. If it is not an ajax request, yo generate the full site with the related part embedded.

Your site will be SEO friendly, available to mobile users, and progressively enhanced for people on modern browsers and platforms. Finally ajax generated hash links will be usable, even as links.

Awesomeness. :)

稳稳的幸福 2024-09-17 03:28:04

这对我来说太棒了! (在镀铬中尝试过)

window.stop();

This worked for me wonderful! (tried in chrome)

window.stop();
无边思念无边月 2024-09-17 03:28:04

只需使用 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 这似乎不再有效。该节点仍然会被删除,但浏览器似乎会以任何方式解析所有元标记并将其保存在内存中。

Just remove the meta tag with 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>

I've set the refresh timeout to 2 seconds above just as an example. You could probably get away with 1 second as well, but don't set it to 0 because the javascript won't get a chance to execute in that case. 0 is also annoying because it breaks back-button usability.

Edit 2012-10-23 This does not appear to work any more. The node still gets removed, but it appears that browsers parse and hold in memory all meta tags any way.

刘备忘录 2024-09-17 03:28:04

我同意元刷新不是正确的前进方向。除了 galambalazs 的链接之外,还可以搜索“progressive optimization”。

但是,本着回答问题的精神,您可以尝试以下操作。它未经测试,可能不适用于所有浏览器,但应该遵循正确的路线:

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

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

I agree that meta refresh is not the right way forward here. In addition to galambalazs' link, search on "progressive enhancement".

However, in the spirit of answering the question, you could try the following. It's untested, may not work in all browsers, but should be along the right lines:

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

Whether removing it would stop the browser from refreshing in time remains to be seen.

池予 2024-09-17 03:28:04

这是我使用的示例,它运行得很好(尤其是在 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>

This is an example of what I use and it works perfectly (especially on 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>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文