如何創建書籤從外部文件覆蓋HTML/div層和CSS

Question

我試圖找到一種方法來創建一個書籤，它將加載（從外部文件）一個新的層/ div與其他HTML和CSS並將其覆蓋在現有頁面上。

有沒有人有一個書籤的例子，他們可以共享嗎？

我可以用新的html內容和CSS類創建div我只是不確定如何編寫bookmarklet和javascript/jquery函數來在現有頁面上加載新內容。

非常感謝！

Answer 1

）

嘗試此代碼，顯然它可以改進，但它的工作原理。您必須將其縮小並確保在將其粘貼到瀏覽器地址欄中之前添加「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"); 
}); 

編輯：

這裏是使用嵌入在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");});