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，因为我没有费心将它上传到任何地方。现在，这是非常准系统的，显然你可以做更多的事情。首先，您可以编写自己的 DOM 而不是使用 iFrame。您可以添加关闭按钮、各种事件等。此时，执行 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 Bookmarklet JS Link

但正如你所看到的，他们直接从 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 回答