如何创建bookmarklet以从外部文件覆盖html / div图层和CSS [英] How do I create bookmarklet to overlay html/div layer and CSS from external file

问题描述

我试图找到一种方法来创建一个书签，它将加载（从外部文件）一个新的图层/ div与其他html和css，并覆盖现有的页面。

有没有人有一个bookmarklet例子，他们可以分享？

我可以创建div与新的html内容和CSS类只是不知道如何写bookmarklet和javascript / jquery函数来加载现有页面上的新内容。

非常感谢！

$ b

尝试这个代码，显然它可以改进，但它的工作原理。

  javascript：（您的浏览器地址栏中必须输入javascript：函数（e，a，g，h，f，c，b，d）{
 if（！f = e.jQuery）|| g> f.fn.jquery || h {
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& this.readyState）|| d ==loaded|| d ==complete））{
h（（f = e.jQuery）.noConflict（1），b = 1）; 
f （c）.remove（）
} 
}; 
 a.documentElement.childNodes [0] .appendChild（c）
} 
}） ，1.3.2，function（$，L）{
 
 //你的代码在这里（有一些内容的div）
 $（< div style ='width：500px ; height：400px; border：5px solid black; background-color：white; box-shadow：10px 10px 10px black;位置：固定; top：150px; left：150px; z-index：99999'>< h1 style ='margin：150px'> hello world< / h1>< / div>）appendTo（body）; 
}）; 
  

编辑：

嵌入iframe的外部文档：

  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（！ （1），b = 1（1），b = 1，b = 1， ）; f（c）.remove（）}}; a.documentElement.childNodes [0] .appendChild（c）}} < 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）;}）; 
  

I'm trying to find a way to create a bookmarklet which will load (from an external file) a new layer/div with other html and css and overlay it on the existing page.

Does anyone have a bookmarklet example for this they could share please?

I can create the div with the new html content and CSS classes I am just not sure how to write the bookmarklet and javascript/jquery function to load new content on top of the existing page.

Thank you very much!

解决方案

)

Try this code, obviously it can be improved, but it works. You have to minifiy it and be sure to add "javascript:" before pasting it in your browser address bar.

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");
});

EDIT:

here is the same code using an external document embedded in an iframe:

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");});

这篇关于如何创建bookmarklet以从外部文件覆盖html / div图层和CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！