从书签打开页面，但是，让它像一个模式窗口？

Posted 2023-02-24

【中文标题】从书签打开页面，但是，让它像一个模式窗口？

【英文标题】：Open page from bookmarklet, but, make it like a modal window?

【发布时间】：2012-01-22 18:56:50

【问题描述】：

我正在使用一个可以（显然）由用户在任何地方调用的书签：

javascript:(function()window.open('http://*****.com/***.html?url=
'+encodeURIComponent(window.location.href),'my_page_name',
'left=200,top=200,width=480,height=500,personalbar=0,
toolbar=0,scrollbars=1,resizable=1'))()

我怎样才能使它像一个模态窗口，这意味着没有丑陋的浏览器窗口边框 - 我应该在书签 URL 中使用 jquery 或类似的东西吗？如果是，如何？

【问题讨论】：

小书签中的jQuery？我敢说这太过分了。

它是 jQueryUI（特别是对话框），它使您能够在没有新浏览器窗口的情况下进行对话框。但我认为在书签中要做的事情很多。

【参考方案1】：

您可以使用Firebug Lite 使用的方法。 基本上，当您单击书签时，您会在页面中插入一个外部 JS 文件。

<a href="javascript:(function(F,i,r,e,b,u,g,L,I,T,E)if(F.getElementById(b))return;E=F[i+'NS']&&F.documentElement.namespaceURI;E=E?F[i+'NS'](E,'script'):F[i]('script');E[r]('id',b);E[r]('src',I+g+T);E[r](b,u);(F[e]('head')[0]||F[e]('body')[0]).appendChild(E);E=new%20Image;E[r]('src',I+L);)(document,'createElement','setAttribute','getElementsByTagName','FirebugLite','4','PATH_TO_JS ','PATH_TO_ICON','BASE_URL','#startOpened');">My bookmark</a>

只需将 BASE_URL、PATH_TO_JS 和 PATH_TO_ICON 更改为您需要的。 另外，不要忘记 BASE_URL 中的 "http://"，除非您想使用相对路径。

您的外部 JS 文件可能包含一个脚本，该脚本将一个元素添加到悬停在其他页面上的页面。我建议使用Twitter Bootstrap 中的 CSS 来弄清楚如何制作可靠的模态窗口。

编辑 --

为了帮助你，我写了a small demo。它由 2 个文件组成：

bookmark.html - 修改了 firebug 代码来创建动态添加脚本的书签 bookmark.js - 创建带有 iframe 的模式

书签.html

<a href="javascript:(function(F,i,r,e,b,u,g,L,I,T,E)if(F.getElementById(b))return;E=F[i+'NS']&&F.documentElement.namespaceURI;E=E?F[i+'NS'](E,'script'):F[i]('script');E[r]('id',b);E[r]('src',I+g+T);E[r](b,u);(F[e]('head')[0]||F[e]('body')[0]).appendChild(E);E=new%20Image;)(document,'createElement','setAttribute','getElementsByTagName','FirebugLite','4','bookmark.js','','http://www.bijtel.com/***/bookmark/','#startOpened');">Bookmark</a>

bookmark.js

(function() 
  var script;

  if(!window.jQuery) 

    script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js";
    document.body.appendChild(script);

  

  (function check_if_loaded() 

    if(!window.jQuery) 

      setTimeout(check_if_loaded, 50);

     else 

      (function($) 

        var
          $dark_bg = $('<div></div>').css('z-index': '1000', 'background-color': '#000000', 'opacity': '0', 'position': 'absolute', 'width': '100%', 'height': '100%'),
          $iframe = $('<iframe></iframe>').css('width': '100%', 'height': '100%', 'border': 1, 'overflow': 'hidden').prop('src': 'http://bijtel.com/cv/', 'width': '100%', 'height': '100%', 'scrolling': 'no'),
          $close = $('<div></div>').css('position': 'absolute', 'top': 0, 'right': 0, 'padding': '5px 10px', 'cursor': 'pointer', 'color': '#ffffff', 'font-size': '10pt', 'font-family': 'verdana').html('close &times;');
          $modal = $('<div></div>').css('z-index': '1010', 'background-color': '#ffffff', 'opacity': '0', 'position': 'absolute', 'top': '10%', 'left': '10%', 'width': '80%', 'height': '80%', 'box-shadow': '7px 7px 5px #333').append($close, $iframe);

        $('body').css('padding': 0, 'margin': 0).prepend($dark_bg, $modal);

        $dark_bg.animate('opacity':0.5, 400);

        $modal.animate('opacity':1, 400);

        $close.on('click', function() 
          $dark_bg.animate('opacity': 0, 400, function() $dark_bg.remove(); );
          $modal.animate('opacity': 0, 400, function() $modal.remove(); );
        );

      (window.jQuery));

    

  ());

());

演示地址：http://bijtel.com/***/bookmark/

【讨论】：

演示链接已损坏。

【参考方案2】：

我对这个主题了解不多，但是查看delicious.com 书签时，我注意到一些参数来限制将显示浏览器窗口的哪些部分：

(function() 
    f = 'http://www.delicious.com/save?url=' + encodeURIComponent(window.location.href) + '&title=' + encodeURIComponent(document.title)  + '&v=5&';
    a = function() 
        if (!window.open(f + 'noui=1&jump=doclose', 'deliciousuiv5', 'location=yes,links=no,scrollbars=no,toolbar=no,width=550,height=550')) location.href = f + 'jump=yes'
    ;
    if (/Firefox/.test(navigator.userAgent)) 
        setTimeout(a, 0)
     else 
        a()
    
)()

我说的参数是location、links、scrollbars和toolbar。但是，这并没有使它成为模态，而且我怀疑是否有一个功能（我假设浏览器窗口彼此独立）。但是它们仍然提供了一个“更清洁”的窗口......

更新：查看this link。基本上，小书签所做的是创建一个新的脚本标签并将其附加到正文中。我假设你可以在该脚本中做任何你想做的事情，包括以你想要的方式创建一个 jQuery 对话框（事实上，这个小书签 确实 使用 jQuery，但它嵌入在脚本本身中；请参阅source)。

这是代码。我自己不会使用这个书签（因为我必须清楚地提供我的用户名/密码），但这是你自己做的一个起点：

var e = document.createElement('script');
e.setAttribute('language', 'javascript');
e.setAttribute('src', 'http://t.rc.vc/delicious/js/delicious.js?username=***&password=***');
e.setAttribute('id', 'delicious_submitter');
document.body.appendChild(e);
void(0);

Obs.：在这两个示例中，我删除了 javascript: 部分并格式化了代码以提高可读性。