Bookmarklets, который создает наложение на странице - PullRequest
Новая
       6

Bookmarklets, который создает наложение на странице

2 голосов
/ 12 марта 2011

Я искал способ показать простой красный div в правом верхнем углу страницы с помощью букмарклета, но не могу найти какое-либо руководство по нему в Интернете. Кто-нибудь может дать мне краткое изложение того, как я могу создать такой букмарклет?

Ответы [ 2 ]

16 голосов
/ 12 марта 2011

Чтобы создать букмарклет в целом или просто как отобразить окно с помощью javascript?

Добавление ваших вещей в тело в верхнем правом углу

Давайте начнем с последней части -вы пометили jquery, так что давайте вернемся к этому (хотя это может быть немного сложным для букмарклета): 

// create the element:
var $e = $('<div id="yourelement"></div>');

// append it to the body:
$('body').append($e);

// style it:
$e.css({
    position: 'absolute',
    top: '10px',
    right: '10px',
    width: '200px',
    height: '90px',
    backgroundColor: 'red'
});

это все, что вам нужно для этого ...

Самый простой способ созданияВаш букмарклет и включите jquery

Что нам нужно сделать:

  1. Сохраните код сверху в файле javascript, размещенном на вашем сервере.
  2. создайте фрагменткод javascript, который добавляет jquery и ваш недавно размещенный файл javascript в тело текущей страницы
  3. , чтобы поместить этот код javascript в тег <a>.

Вот код, который делает это:

javascript:var i,s,ss=['http://yourdomain.com/path-to-your-script','http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js'];for(i=0;i!=ss.length;i++){s=document.createElement('script');s.src=ss[i];document.body.appendChild(s);}void(0);

Он просто перебирает массив и прикрепляет теги <script> к его телу с путем к обоим файлам javascript как src.

Что касается создания самого букмарклета, выпросто поместите весь кодтег de <a>, вроде как (обратите внимание на двойные кавычки): 

<a href="javascript:javascript:var i,s,ss=['http://yourdomain.com/path-to-your-script','http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js'];for(i=0;i!=ss.length;i++){s=document.createElement('script');s.src=ss[i];document.body.appendChild(s);}void(0);">Drag me to your toolbar</a>

И все.

Обратите внимание, что букмарклет фактически переопределяет версию jquery, используемую всайт, если он есть ... может сломать некоторые сайты ...

Дополнительная информация о создании закладок:

http://betterexplained.com/articles/how-to-make-a-bookmarklet-for-your-web-application/

0 голосов
/ 12 марта 2011

Вам придется преодолеть следующее:

  • добавление jQuery на страницу, если она еще не существует
  • минимизируйте ваш код и оберните в самоисполняющийся корпус

Вот пример из примера @ anrorhs выше: 

<a href="(function(){var $e = $('<div id="yourelement"></div>');$('body').append($e);$e.css({    position: 'absolute',    top: '10px',    right: '10px',    width: '200px',    eight: '90px',    backgroundColor: 'red'});})();">drag me to your bookmarks bar</a>

Чтобы выполнить встроенную проверку jQuery - следуйте инструкциям здесь: http://benalman.com/projects/run-jquery-code-bookmarklet/

Это даст вам возможность вставить приведенный выше код, и он будет условно загружать jQuery из CDN Google, когда его еще нет на странице.

Приветствие.

...