Добавление favicon в javascript Bookmarklet (использует window.open)

У меня есть букмарклет, который запускает функцию window.open javascript, чтобы открыть небольшое окно с моим букмарклетом - внешнюю функцию, используемую для связи между любым сайтом и моим сервером. Я бы хотел, чтобы favicon отображался, когда букмарклет добавлен на панель закладок. Я понимаю, что букмарклет - это javascript, нет привязанного к нему домена, поэтому это будет сложно или невозможно достичь этой цели.

Мое понимание проблемы:

Favicons легко понять, это ссылка в заголовке HTML-документа. Браузер может вытащить это при закладке фактического сайта по ссылке. Однако, как вы видите, мой букмарклет сработал с кодом запуска javascript, где не существует HTML, поэтому нет ссылки на favicon. Я еще не готов сдаться, но я чувствую, что есть какая-то инъекция, которую можно сделать...

На данный момент код запуска букмарклета выглядит следующим образом:

Текущий Script - букмарклет, no favicon (обратите внимание, что весь код формируется с разрывами строк - не будет работать во всех браузерах, обычно в одной строке)

javascript:void(window.open(
        'http://mydomain.com/bookmarklet/form?u='
        +encodeURIComponent(location.href)+
        't='+encodeURIComponent(document.title),
        'test','status=0,toolbar=0,location=0,menubar=0,
         resizable=false,scrollbars=false,height=379,width=379'
        ));

Ближайшая вещь, которую я нашел для решения, выглядит следующим образом, но она не открывает новое окно - просто создает новую вкладку с html в качестве страницы:

Рабочий значок, без окна букмарклета

javascript:'<!DOCTYPE html>
    <html><head>
    <title>Hello World</title>
    <link rel="icon" type="image/png" href="#" onclick="location.href='http://www.tapper-ware.net/devel/js/JS.Bookmarklets/icons/next.png'; return false;" />
    </head>
    <body>Hello World</body>
    </html>';

Я попробовал комбинацию из двух, но, похоже, не использовал значок. Мне было бы интересно узнать, может ли кто-нибудь увидеть способ обхода. Я думаю, что это возможно, я просто не думаю, что он настроен правильно, как я пытался.

Мой гибрид двух - букмарклет, но не favicon

javascript:'<!DOCTYPE html>
    <html><head>
    <title>Hello World</title>
    <link rel="icon" type="image/png" href="#" onclick="location.href='http://www.tapper-ware.net/devel/js/JS.Bookmarklets/icons/next.png'; return false;" />
    </head><body>Hello World</body></html>';
    window.open('http://mydomain.com/bookmarklet/form?u='
    +encodeURIComponent(location.href)+
    '&t='+encodeURIComponent(document.title),
    'test',
    'status=0,toolbar=0,location=0,menubar=0,resizable=false,
     scrollbars=false,height=379,width=379').void(0);

Что я сделал, так это использование структуры html перед запуском window.open(), это успешно открыло мой букмарклет в новом окне, но значок значка не появился для значка закладки.

Логическое решение:

Мои мысли по этому поводу состоят в том, чтобы указать букмарклет на страницу, которая представляет собой просто файл HTML со ссылкой favicon и запуск Script в <head>. Тем не менее, я не хочу этого открытия на новой вкладке с пустым файлом HTML, который затем запускает всплывающее окно.. Обходное решение..?

Существует аналогичный вопрос, но я, похоже, не нашел ответ, который я ищу:

Как установить значки/значки при перемещении букмарклета на панель инструментов?

Источник для работы favicon javascript (без букмарклета):

http://www.tapper-ware.net/blog/?p=97

Мне было бы интересно, какие ваши текущие знания/мысли об этом будут

Ответ 1

Некоторые из вещей, которые я пробовал, возможно, заставят вас немного больше:

Добавить новый элемент ссылки в текущий документ:

javascript: var newLink = document.createElement('link');
newLink.setAttribute('rel','icon');
newLink.setAttribute('type','image/png');
newLink.setAttribute('href','http://www.tapper-ware.net/devel/js/JS.Bookmarklets/icons/next.png');
document.querySelector('head').appendChild(newLink);
void(0);

Обратите внимание, что я использовал querySelector из-за тестирования IE (хотя работает и в современных браузерах). С Chrome и FF я продолжал получать недопустимый символ при попытке создать элемент, поэтому мне пришлось выполнять кусочную настройку атрибута.

Пробовал использовать кодированную строку с кодировкой base64, используя схему URI "data: image/png; base64, iVBORw0KGgoAAAA...", но это ничего не помогло из-за того, что мне все равно пришлось установить его в текущий HTML-код текст (который я мог бы сделать, но столкнулся с той же проблемой, что и выше, без букмарклета).

Может быть, это невозможно сделать из-за проблем с сайтом? Не уверен... В любом случае, действительно любопытно узнать, что вы придумали (если вам удастся что-то придумать).

Ответ 2

Я попытался и повторил попытку, и мой первый вывод был: "Это не может быть сделано (по крайней мере, не в FF4 на Ubuntu 11.04)". Вам нужно (я думаю) простое решение для ваших посетителей сайта (перетащите и нажмите, добавьте закладку с 1 кликом...).

Я нашел обходной путь, он выполняет эту работу, но он немного глючит (возможно, кто-то может помочь исправить его).
ПЛЮСЫ:

добавить значок в букмарклет
он использует windows.open
не оставляет пустых страниц за

МИНУСЫ:

он перезагружает текущую страницу (вместо того, чтобы оставить страницу позади)
Невозможно сделать блокировщик Firefox POP-ul разрешить "javascript:" сгенерированную HTML-страницу для загрузки POP-ups, поэтому вам нужно нажать "Разрешить" каждый раз

Это код:

<a href="javascript:'<!DOCTYPE html><html><head><link rel="icon" type="image/png" href="http://www.tapper-ware.net/devel/js/JS.Bookmarklets/icons/next.png" /></head><body onLoad="window.open(\'http://example.com',\'test\',\'status=0,toolbar=0,location=0,menubar=0,resizable=false,scrollbars=false,height=379,width=379\');setTimeout(\'history.back(-1);\',100);"></body></html>';">Bookmarklet</a>

Это ссылка, которую вы положили на свою страницу, пользователю нужно перетащить эту ссылку на панель закладок (вы можете использовать что-то вроде Добавить закладку Script для добавления его в качестве закладки с 1 кликом), закладка не имеет значка, пока пользователь не нажмет его хотя бы один раз.

Итак, как это надо работать:
1. перенаправить пользователя на сгенерированную HTML-страницу из букмарклета (что делает возможной ICON)
2. onLoad откройте окно, которое вам нужно, используя " windows.open"
3. перенаправить страницу назад с помощью history.back(-1) "

В теории everithing происходит так быстро, что пользователь не видит новую страницу, только что текущая страница перезагружается, и появляются новые окна.

Проблема:
1. Я использую setTimeout для history.back beacause window.open заблокирован Firefox, поэтому мне нужно щелкнуть разрешить каждый раз (если кто-то может это исправить... у нас есть шанс использовать это, развить его дальше:))

Я знаю, что это не надежное решение, но это единственное решение, которое я получил до сих пор.

Надеюсь, это немного поможет.:)

Ответ 3

"Мне не нужно это открытие на новой вкладке с пустым файлом HTML, который затем запускает всплывающее окно.. Обходное решение..?

Если вы действительно визуальный эффект, вы можете попробовать запустить пустой HTML в скрытом iframe, а затем запустить javascript.

Надеюсь, что поможет

Ответ 4

Это может быть не решение, которое вы хотите, особенно если вы не используете Firefox, но я использую надстройку, называемую Закладка Favicon Changer, чтобы установить значок на моих букмарклетах, и он отлично работает.