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

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

36 голосов
/ 10 мая 2011

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

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

Фавиконы просты для понимания, это ссылка в заголовке HTML-документа. Браузер может сделать это, добавив в закладки реальный сайт по ссылке. Однако, как вы видите, мой букмарклет запускается из кода запуска javascript, в котором нет HTML, поэтому нет ссылки на 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="http://www.tapper-ware.net/devel/js/JS.Bookmarklets/icons/next.png" />
    </head>
    <body>Hello World</body>
    </html>';

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

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

javascript:'<!DOCTYPE html>
    <html><head>
    <title>Hello World</title>
    <link rel="icon" type="image/png" href="http://www.tapper-ware.net/devel/js/JS.Bookmarklets/icons/next.png" />
    </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-файл со ссылкой на значок фавиконы и сценарием запуска в <head>. Тем не менее, я не хочу, чтобы это открытие в новой вкладке с пустым HTML-файлом, который затем запускает всплывающее окно .. Временное решение ..?

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

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

Исходный код рабочего Javascript favicon (без букмарклета):

http://www.tapper -ware.net / блог /? Р = 97

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

Ответы [ 4 ]

6 голосов
/ 08 июня 2011

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

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

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

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

3 голосов
/ 07 июня 2011

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

Я нашел обходной путь, он выполняет свою работу, но он немного глючит (может быть, кто-то может помочь исправить это)* не оставляет пустых страниц позади

CONS:

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

Это код:

<a href="javascript:'&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;link rel=&quot;icon&quot; type=&quot;image/png&quot; href=&quot;http://www.tapper-ware.net/devel/js/JS.Bookmarklets/icons/next.png&quot; /&gt;&lt;/head&gt;&lt;body onLoad=&quot;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);&quot;&gt;&lt;/body&gt;&lt;/html&gt;';">Bookmarklet</a>

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

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

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

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

Я знаю, что ЭТО не надежное решение, но это единственное решение, которое я 'Мы так далеко.

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

1 голос
/ 31 мая 2011

"Я не хочу, чтобы это открытие открывалось на новой вкладке с пустым HTML-файлом, который затем запускает всплывающее окно .. Временное решение ..?"

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

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

0 голосов
/ 04 июня 2011

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

...