这个boorkmarklet是如何工作的?

时间:2012-12-06 12:41:53

标签: javascript bookmarklet

javascript:
void((function(d)
{

  if(self!=top||d.getElementById('toolbar')&&d.getElementById('toolbar').getAttribute('data-resizer'))
      return%20false;
      d.write('<!DOCTYPE%20HTML><html%20style="opacity:0;">
               <head>
                   <meta%20charset="utf-8"/>
               </head>

               <body>
                   <a%20data-viewport="320x480"%20data-icon="mobile">Mobile%20(e.g.%20Apple%20iPhone)</a>
                   <a%20data-viewport="320x568"%20data-icon="mobile"%20data-version="5">Apple%20iPhone%205</a>
                   <a%20data-viewport="600x800"%20data-icon="small-tablet">Small%20Tablet</a>
                   <a%20data-viewport="768x1024"%20data-icon="tablet">Tablet%20(e.g.%20Apple%20iPad%202-3rd,%20mini)</a>
                   <a%20data-viewport="1280x800"%20data-icon="notebook">Widescreen</a>

                   <script%20src="http://lab.maltewassermann.com/viewport-resizer/resizer.min.js"></script>
               </body>
             </html>')})(document));

我试图将is放入href =“”,但它无法正常工作

1 个答案:

答案 0 :(得分:2)

首先,让我们删除javascript:void()并提供新行

,使其更易于阅读
(function (d) {
    if (
        self != top ||
        d.getElementById('toolbar') && d.getElementById('toolbar').getAttribute('data-resizer')
        ) return false;
    d.write('<!DOCTYPE HTML><html style="opacity:0;"><head><meta charset="utf-8"/></head><body><a data-viewport="320x480" data-icon="mobile">Mobile (e.g. Apple iPhone)</a><a data-viewport="320x568" data-icon="mobile" data-version="5">Apple iPhone 5</a><a data-viewport="600x800" data-icon="small-tablet">Small Tablet</a><a data-viewport="768x1024" data-icon="tablet">Tablet (e.g. Apple iPad 2-3rd, mini)</a><a data-viewport="1280x800" data-icon="notebook">Widescreen</a><script src="http://lab.maltewassermann.com/viewport-resizer/resizer.min.js"></script></body></html>')
})(document);

记住self === window。现在,它是如何工作的? 如果

,它就是无所事事
  • 它不是最顶层的框架或
  • 存在一个元素 #toolbar ,其属性为 data-resizer

否则将文档设置为那里的代码,这是一些<a> s然后导入 http://lab.maltewassermann.com/viewport-resizer/resizer.min.js

如何将其变成href?
您首先需要encodeURI

<a href="javascript:void%20(function%20(d)%20%7B%0A%20%20%20%20%20%20%20%20if%20(%0A%20%20%20%20%20%20%20%20%20%20%20%20self%20!=%20top%20%7C%7C%0A%20%20%20%20%20%20%20%20%20%20%20%20d.getElementById('toolbar')%20&&%20d.getElementById('toolbar').getAttribute('data-resizer')%0A%20%20%20%20%20%20%20%20%20%20%20%20)%20return%20false;%0A%20%20%20%20%20%20%20%20d.write('%3C!DOCTYPE%20HTML%3E%3Chtml%20style=%22opacity:0;%22%3E%3Chead%3E%3Cmeta%20charset=%22utf-8%22/%3E%3C/head%3E%3Cbody%3E%3Ca%20data-viewport=%22320x480%22%20data-icon=%22mobile%22%3EMobile%20(e.g.%20Apple%20iPhone)%3C/a%3E%3Ca%20data-viewport=%22320x568%22%20data-icon=%22mobile%22%20data-version=%225%22%3EApple%20iPhone%205%3C/a%3E%3Ca%20data-viewport=%22600x800%22%20data-icon=%22small-tablet%22%3ESmall%20Tablet%3C/a%3E%3Ca%20data-viewport=%22768x1024%22%20data-icon=%22tablet%22%3ETablet%20(e.g.%20Apple%20iPad%202-3rd,%20mini)%3C/a%3E%3Ca%20data-viewport=%221280x800%22%20data-icon=%22notebook%22%3EWidescreen%3C/a%3E%3Cscript%20src=%22http://lab.maltewassermann.com/viewport-resizer/resizer.min.js%22%3E%3C/script%3E%3C/body%3E%3C/html%3E')%0A%20%20%20%20%7D)(document);">Bookmarklet</a>