9

私はブックマークレットを使用してhtmlページをロードしていますが、これはすべてうまく機能しますが、ブラウザは一般的に外側が醜いため、あまり熱く見えません!

ページを完全にフレームなしでロードする方法はありますか? ページ内からは不可能だと思うjqueryモーダルバージョンのように、いわばそれ自体をオーバーレイします。

document.write コマンドでページを破棄し、代わりに js バージョンを配置する方法はありますか? それとも他の方法ですか？

アマゾンの例:

次のコードを使用してブックマークレットを作成し、私が意味することのより明確な例を取得します。アカウントを持っていなくても、効果が表示されます。

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()}())
4

4 に答える 4

13

別のページにあるHTMLを表示するだけの場合は、次のようにすることができます。

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

いくつかの基本的なスタイルで：

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

もちろん、これらのスタイルをリモートホストからロードする必要があります。

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

したがって、ブックマークレットは次のようになります：http: //jsfiddle.net/radu/mTKHQ/。これは、ローカルでホストされているcssを使用したものです。これは、わざわざどこにもアップロードしなかったためです。さて、これは非常に必要最低限​​のものであり、明らかにできることはもっとたくさんあります。まず、iFrameを使用する代わりに、独自のDOMを作成できます。閉じるボタンやさまざまなイベントなどを追加できます。その時点で、Amazonが行ったことを実行し、スクリプト/スタイルシートローダーを使用してリモートホストからファイルをロードすることは理にかなっています。

(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));

これの前にjavascript:、を付けると、新しいブックマークレットが作成されます。

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));
于 2012-08-01T16:21:54.553 に答える
1

最も簡単で軽量なソリューションは、 を使用することwindow.openです。

次のようなものは、画面の中央に 600x250 のウィンドウを表示します。ウィンドウのタイトルを表示できるタイトルバーのみが表示されます。

これをブラウザの URL フィールドに貼り付けて試してみてください。

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)();
于 2012-08-02T04:34:12.453 に答える
0 
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);})();

これは、特定のサイトにポップアップを作成する「font-friend」ブックマークレットのコードです。個々のニーズに合わせてコード参照を変更することもできますが、出発点を与える必要があります。

ここにリンクがありますhttp://somadesign.ca/projects/fontfriend/

于 2012-07-31T23:00:46.177 に答える
-1

それをさらに見て、表示されるブックマークレットを調べると、全体的なコード構造は次のようになります。

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

ご覧のとおり、無名関数が作成されており、ここで行われていることの要点は、スクリプト要素s = d.createElement（'script'）を現在のドキュメントに作成し、ブックマークレットの残りの部分をロードすることです。 。

// 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);

href ...の文字列の作成についてはl.href = u + '?u=' + e(l) + '&t=' + e(d.title);、内部参照用であるため、どのページから来たのかがわかります。ページのタイトルからウィッシュリストアイテムが何であるかを作成していると思います（それは少なくともそれがどのように見えるかです）。

あなたはここで彼らのJSコード全体を見ることができます、彼らはたくさん起こっています： AmazongブックマークレットJSリンク

しかし、ご覧のとおり、Javascriptから直接ポップアップ全体とDOM要素を構築します。

  // (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は内部のhtml作成関数です（私はそれをコピーすることをお勧めします）

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

つまり、基本的には、JSから完全に表示したいものをすべて用意し、それを現在のページのドキュメントDOMに挿入して、そこに行く必要があると思います。

于 2012-07-30T14:52:01.573 に答える