Carica una finestra modale da un bookmarklet (come il bookmarklet Amazon wishlist)

Question

Sto usando un bookmarklet per caricare una pagina html che funziona perfettamente, ma non sembra così eccitante a causa dei browser generalmente brutti in giro!

C'è un modo per caricare la pagina completamente senza cornice? Come una versione modale jquery che non penso sia possibile all'interno della pagina, sovrapponendosi per così dire.

C'è un modo per lanciare la pagina nei comandi document.write e inserire invece una versione js di esso? O in qualche altro modo?

Amazon Esempio:

Creare un bookmarklet utilizzando il seguente codice per ottenere un esempio più chiaro di quello che voglio dire - non importa se non si dispone di un account vedrete l'effetto.

javascript:(function(){var%20w=window,l=w.location,d=w.document,s=d.createElement('script'),e=encodeURIComponent,o='object',n='AUWLBookenGB',u='https://www.amazon.co.uk/wishlist/add',r='readyState',T=setTimeout,a='setAttribute',g=function(){d[r]&&d[r]!='complete'?T(g,200):!w[n]?(s[a]('charset','UTF-8'),s[a]('src',u+'.js?loc='+e(l)+'&b='+n),d.body.appendChild(s),f()):f()},f=function(){!w[n]?T(f,200):w[n].showPopover()};typeof%20s!=o?l.href=u+'?u='+e(l)+'&t='+e(d.title):g()}()) 

Answer 1

Se invece si è interessati a mostrare un po 'HTML che avete in un'altra pagina, si può fare qualcosa di simile:

var modal = document.createElement('iframe'); 
modal.setAttribute('src', 'http://codinghorror.com'); 
modal.setAttribute('scrolling', 'no'); // no scroll bars on the iframe please 
modal.className = 'modal'; 
document.body.appendChild(modal); 

Con alcuni stili di base:

.modal { 
    border:0;    
    height:200px; 
    position:fixed; 
    right:20px; 
    top:20px; 
    width:200px; 
    z-index:101; 
}​ 

Naturalmente, è necessario caricare questi stili da un host remoto:

var c = document.createElement('link'); 
c.type = 'text/css'; 
c.rel = 'stylesheet'; 
c.href = '//example.com/main.css'; 
document.body.appendChild(c); 

Quindi il bookmarklet è simile a: http://jsfiddle.net/radu/mTKHQ/. Questo è con il css ospitato localmente dal momento che non mi sono preoccupato di caricarlo ovunque. Ora, questo è molto semplice e ovviamente c'è molto più che puoi fare. Prima di tutto, puoi scrivere il tuo DOM invece di usare un iFrame. È possibile aggiungere un pulsante di chiusura, vari eventi, ecc A quel punto, non avrebbe molto senso per fare quello che ha fatto Amazon e utilizzare un caricatore script/foglio di stile per caricare i file da un host remoto, in questo modo:

(function (d) { 
    var s = d.createElement('script'); 
    s.type = 'text/javascript'; 
    s.async = true; 
    s.src = '//example.com/main.js'; 
    d.body.appendChild(s); 
    var c = d.createElement('link'); 
    c.type = 'text/css'; 
    c.rel = 'stylesheet'; 
    c.href = '//example.com/main.css'; 
    d.body.appendChild(c); 
}(document)); 

anteporre questo con javascript:, e hai il tuo nuovo bookmarklet:

javascript:(function(d){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='//example.com/main.js';d.body.appendChild(s);var c=d.createElement('link');c.type='text/css';c.rel='stylesheet';c.href='//example.com/main.css';d.body.appendChild(c);}(document)); 

Answer 2

Upon guardando più, e ispezionare il bookmarklet che appare, qui è la struttura complessiva del codice:

javascript: (function() { 
     var w = window, 
     l = w.location, 
     d = w.document, 
     s = d.createElement('script'), 
     e = encodeURIComponent, 
     x = 'undefined', 
     u = 'http://www.amazon.co.uk/wishlist/add'; 
     if (typeof s != 'object') l.href = u + '?u=' + e(l) + '&t=' + e(d.title); 
     function g() { 
      if (d.readyState && d.readyState != 'complete') { 
      setTimeout(g, 200); 
      } else { 
      // testing if AUWLBook is undefined (AUWL is their global object for it) 
      // If it is, they add the <script> tag for their JS (variable u) 
      if (typeof AUWLBook == x) s.setAttribute('src', u + '.js?loc=' + e(l)), 
      d.body.appendChild(s); 
      function f() { 
       // they keep looping through until the Object is finally created 
       // Then they call the showPopover function which initializes everything 
       // Builds all the HTML (with JS, etc) 
       (typeof AUWLBook == x) ? setTimeout(f, 200) : AUWLBook.showPopover(); 
      } 
      f(); 
      } 
     } 
     g(); 
    }()) 

Come si può vedere si crea una funzione anonima, e il jist di ciò che sta accadendo qui è che stanno creando un elemento di script s = d.createElement ('script'), nel documento corrente che carica il resto del bookmarklet.

// since their global object will be undefined at first they create it 
if (typeof AUWLBook == x) s.setAttribute('src', u + '.js?loc=' + e(l)), 
    d.body.appendChild(s); 

Per quanto riguarda l'edificio stringa per il href ... Sembra l.href = u + '?u=' + e(l) + '&t=' + e(d.title); è per il loro riferimento interno in modo da sapere quale pagina/etc sei venuto, sto supponendo che stanno costruendo che cosa l'articolo Lista dei desideri è dal titolo della pagina (è quello che sembra almeno).

Si può vedere tutto il loro codice JS qui, hanno un bel po 'in corso: Amazong Bookmarklet JS Link

Ma come si può vedere che costruire l'intero comparsa & i DOMelements direttamente dal JavaScript:

// (part of the AUWLBook object) 
    showPopover : function(args){ 
    // etc etc... 

    // open in window if it can't create a popover 
    if (!this.canDisplayPopover()) { 
    window.location.href = 'https://www.amazon.co.uk/wishlist/add' + '?u=' + encodeURIComponent(window.location) + '&t=' + encodeURIComponent(document.title); 
    return; 
    } 

    // Then comes just an insane amount of lines of creating all the elements 
    floater = shmCreateElement('table', { width: bookmarkletWidth, border: '0', id: 'auwlPopover' }, {position: 'absolute', zIndex: '999999999', width: bookmarkletWidth, tableLayout: 'auto', lineHeight: '100%', borderCollapse: 'collapse'}); 

shmCreateElement essendo la loro funzione interna creazione html (mi piacerebbe def suggerisco copiandolo)

 function shmCreateElement(tagName, props, styles, children) { ... } 

Quindi suppongo che in pratica sia necessario avere tutto ciò che si desidera apparire completamente proveniente da JS, averlo iniettato nel documento DOM attuale, e così via.

Answer 3

javascript:(function()%20{if(typeof%20jQuery=='undefined'){var%20jqit=document.createElement('script');jqit.type='text/javascript';jqit.src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js';document.getElementsByTagName('head')[0].appendChild(jqit);}%20_my_script=document.createElement('script');_my_script.type='text/javascript';_my_script.src='http://font-friend.googlecode.com/svn/trunk/font-friend.js';document.getElementsByTagName('head')[0].appendChild(_my_script);})(); 

Questo è il codice per il bookmarklet "font-friend", che crea un popup in un determinato sito. Potresti semplicemente modificare i riferimenti del codice alle tue esigenze individuali, ma dovresti dare un punto di partenza.

ecco il link ad esso http://somadesign.ca/projects/fontfriend/

Answer 4

più semplice, la soluzione più leggera sarebbe quella di utilizzare window.open.

Qualcosa come il seguente mostrerà una finestra 600x250 nel mezzo dello schermo. Apparirà solo la barra del titolo, che può mostrare il titolo della finestra.

incolla questo nel campo URL del browser per provarlo:

javascript:(function()%7Bvar%20d=document;window.open('http://stackoverflow.com','_blank','width=600,height=250,left='+(screen.width/2-300)+',top='+(screen.height/2-125))%7D)();