Как создать букмарклет для наложения слоя html / div и CSS из внешнего файла - PullRequest
Новая
       6

Как создать букмарклет для наложения слоя html / div и CSS из внешнего файла

2 голосов
/ 30 ноября 2011

Я пытаюсь найти способ создать букмарклет, который будет загружать (из внешнего файла) новый слой / div с другими html и css и накладывать его на существующую страницу.

У кого-нибудь есть пример букмарклета, которым он может поделиться, пожалуйста?

Я могу создать div с новым содержимым html и CSS-классами. Я просто не уверен, как написать функцию bookmarklet и javascript / jquery для загрузки нового содержимого поверх существующей страницы.

Большое спасибо!

1 Ответ

2 голосов
/ 01 декабря 2011

Попробуйте этот код, очевидно, его можно улучшить, но он работает.Вы должны минимизировать его и обязательно добавить «javascript:», прежде чем вставлять его в адресную строку браузера. 

javascript : (function (e, a, g, h, f, c, b, d) {
    if (!(f = e.jQuery) || g > f.fn.jquery || h(f)) {
        c = a.createElement("script");
        c.type = "text/javascript";
        c.src = "http://ajax.googleapis.com/ajax/libs/jquery/" + g + "/jquery.min.js";
        c.onload = c.onreadystatechange = function () {
            if (!b && (!(d = this.readyState) || d == "loaded" || d == "complete")) {
                h((f = e.jQuery).noConflict(1), b = 1);
                f(c).remove()
            }
        };
        a.documentElement.childNodes[0].appendChild(c)
    }
})(window, document, "1.3.2", function ($, L) {

    //your code here (a div with some content)
    $("<div style='width:500px;height:400px; border:5px solid black;  background-color:white; box-shadow:10px 10px 10px black; position:fixed; top: 150px; left:150px; z-index:99999'><h1 style='margin:150px'>hello world</h1></div>").appendTo("body");
});

РЕДАКТИРОВАТЬ:

здесь тот же код с использованием внешнего документа, встроенногов фрейме: 

javascript:(function(e,a,g,h,f,c,b,d){if(!(f=e.jQuery)||g>f.fn.jquery||h(f)){c=a.createElement("script");c.type="text/javascript";c.src="http://ajax.googleapis.com/ajax/libs/jquery/"+g+"/jquery.min.js";c.onload=c.onreadystatechange=function(){if(!b&&(!(d=this.readyState)||d=="loaded"||d=="complete")){h((f=e.jQuery).noConflict(1),b=1);f(c).remove()}};a.documentElement.childNodes[0].appendChild(c)}})(window,document,"1.3.2",function($,L){$("<div style='width:500px;height:400px; border:5px solid black;  background-color:white; box-shadow:10px 10px 10px black; position:fixed; top: 150px; left:150px; z-index:99999'><iframe style='width:100%; height:100%;' src='http://www.htmlcodetutorial.com/frames/hello.html'></iframe></div>").appendTo("body");});
...