Javascript для добавления iframe ко всем внешним URL

Question

javascript noob пытается что-то выяснить.Я видел скрипт, расположенный здесь:

Использование jQuery для открытия всех внешних ссылок в новом окне

, в котором проверяются URL-адреса на странице, чтобы увидеть, соответствуют ли ониURL текущей страницы.Если нет, этот конкретный скрипт откроет их в новом окне.Я хотел бы использовать тот же тест для URL, но если они являются внешними, я бы хотел, чтобы iframe добавлялся к каждому URL, синтаксис la fancybox.Мой скрипт noob:

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

, который я считаю неверным.Любая помощь?Спасибо

Answer 1

Вы должны изменить атрибут href, используя attr, а не 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 доступно только в 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, согласно документации , он должен работать таким образом. Однако вы правы, вы можете просто добавить класс iframe:

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

Answer 2

Вы используете неверный метод 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';
    });
});

Answer 3

Вместо добавления, которое изменяет внутренний HTML-код элемента, измените атрибут href:

$(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');
    });
});