Comment créer un bookmarklet pour superposer une couche html/div et CSS depuis un fichier externe

Question

J'essaie de trouver un moyen de créer un bookmarklet qui va charger (à partir d'un fichier externe) un nouveau calque/div avec d'autres html et css et superposez-le sur la page existante.

Est-ce que quelqu'un a un exemple de bookmarklet pour cela, ils pourraient partager s'il vous plaît?

Je peux créer la div avec le nouveau contenu html et les classes CSS Je ne suis pas sûr de savoir comment écrire la fonction bookmarklet et javascript/jquery pour charger du nouveau contenu sur la page existante.

Merci beaucoup!

Answer 1

)

Essayez ce code, évidemment, il peut être amélioré, mais cela fonctionne. Vous devez le minifier et assurez-vous d'ajouter "javascript:" avant de le coller dans la barre d'adresse de votre navigateur.

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:

est ici le même code en utilisant un document externe intégré dans un 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");});