将 iframe 附加到所有外部 URL 的 Javascript答案

【问题标题】：Javascript to append iframe to all external URLs将 iframe 附加到所有外部 URL 的 Javascript
【发布时间】：2011-06-30 13:53:11
【问题描述】：

javascript noob 试图弄清楚一些事情。我在这里看到了一个脚本：

Using jQuery to open all external links in a new window

检查页面上的哪些 url 以查看它们是否与当前页面 url 匹配。如果没有，此特定脚本将在新窗口中打开它们。我想对 url 使用相同的测试，但如果它们是外部的，我希望将 ?iframe 附加到每个 url，这是一种 la fancybox 语法。我的菜鸟脚本是：

$(document).ready(function() {
    $('a[@href^="http://"]').filter(function() {
        return this.hostname && this.hostname !== location.hostname;
    }).append('?iframe')
});

我认为这是不正确的。有什么帮助吗？谢谢

【问题讨论】：

好吧，我相信你们三个人都给了我一个正确的代码解决方案，但是我不知道如何从fancybox 网站让它工作，因为他们在他们的例子。抱歉，我应该在发布之前预见到这个问题。我想如果可以应用相同的解决方案将一个类附加到所有外部 url，那么希望它符合fancybox 吗？此外，此方法还解决了@luke 和@felix 提到的问题。

标签： javascript url iframe append external

【解决方案1】：

您必须使用attr 更改href 属性，而不是append 新子元素：

$('a[href^="http://"]').filter(function() { // no @ before the attribute name
    return this.hostname && this.hostname !== location.hostname;
}).attr('href', function(i, value) {
    // takes care of URLs with parameters
    return value + (value.indexOf('?') > 0 ? '&' : '?') + 'iframe';
});

请注意，hostname 是 only available in HTML5。所以在不支持 HTML 5 的浏览器中，过滤器会丢弃每个元素（更新：鉴于您链接到的问题是从 2009 年开始的，看来浏览器实现了hostname，但它不是任何规范的一部分 ）。您可以将其更改为：

var hostname = new RegExp("^http://" + location.hostname);

$('a[href^="http://"]').filter(function() {
    return !hostname.test(this.href);
}).attr('href', function(i, value) {
    return value + (value.indexOf('?') > 0 ? '&' : '?') + 'iframe';
});

如果您还想将链接转换为https 网站，请放弃属性选择器并更改正则表达式：

var hostname = new RegExp("^https?://" + location.hostname);

$('a').filter(function() {...

更新：

特别是对于fancybox，根据documentation，它应该以这种方式工作。但是，您是对的，您可以添加 iframe 类：

 $('a').filter(function() {...}).addClass('iframe');

【讨论】：

如果我想将 id 设为“iframe”，使用第一个示例将其更改为：.attr('id': 'iframe');?
@javy：是的，不是的，我刚刚更新了关于这个的问题；）你会覆盖属性，这意味着现有的类将被覆盖，你必须设置类，因为你不能超过一个具有相同 ID 的元素（并且 fancybox 使用该类）。

【解决方案2】：

修改href属性，而不是修改元素内部HTML的append：

$(document).ready(function() {
    var elements = $('a[@href^="http://"]').filter(function() {
        return this.hostname && this.hostname !== location.hostname;
    });

    elements.each(function(index, value) {
        $(this).attr('href', $(this).attr('href') + '?iframe');
    });
});

【讨论】：

【解决方案3】：

您对append 方法的使用不正确。以下代码显示了如何实现您的要求，此外还考虑了您需要牢记的几个额外因素，即：

1) 使用 https 而不是 http 的链接呢？
2）那些已经包含查询字符串参数的链接呢？ http://www.blah.com/?something=123 应该改为http://www.blah.com/?something=123&iframe 而不是http://www.blah.com/?something=123?iframe

$(function() {
    $('a[href^="http"]').filter(function() {
        return this.hostname && this.hostname !== location.hostname;
    }).each(function() {
        this.href += ((this.href.indexOf('?') >= 0) ? '&' : '?') + 'iframe';
    });
});

【讨论】：