Tải cửa sổ phương thức từ bookmarklet (giống như bookmarklet danh sách yêu thích của Amazon)

Question

Tôi đang sử dụng bookmarklet để tải trang html hoạt động tốt, nhưng trông không quá nóng do trình duyệt thường xấu xí xung quanh bên ngoài!

Có cách nào để tải trang hoàn toàn không khung không? Giống như một phiên bản phương thức jquery của nó mà tôi không nghĩ là có thể từ bên trong trang, che phủ chính nó để nói.

Có cách nào để ném trang ra trong lệnh document.write và đặt phiên bản js của trang đó lên đó không? Hoặc một số cách khác?

Amazon Ví dụ:

Tạo một bookmarklet sử dụng sau vào mã để có được một ví dụ rõ ràng hơn về những gì tôi có nghĩa là - không quan trọng nếu bạn không có tài khoản bạn sẽ thấy hiệu quả.

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

Nếu tất cả các bạn muốn là để hiển thị một số html mà bạn có trên một trang khác, bạn có thể làm một cái gì đó như thế này:

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

Với một số kiểu cơ bản:

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

Tất nhiên, bạn nên tải những phong cách từ một máy chủ từ xa:

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

Vì vậy, bookmarklet của bạn trông giống như: http://jsfiddle.net/radu/mTKHQ/. Điều này là với css lưu trữ tại địa phương kể từ khi tôi không bận tâm tải lên nó bất cứ nơi nào. Bây giờ, đây là rất barebones và rõ ràng là có rất nhiều bạn có thể làm. Trước hết, bạn có thể viết DOM của riêng bạn thay vì sử dụng iFrame. Bạn có thể thêm một nút đóng, các sự kiện khác nhau, vv Vào thời điểm đó, nó sẽ làm cho tinh thần để làm những gì amazon đã làm và sử dụng một bộ nạp script/stylesheet để tải tập tin từ một máy chủ từ xa, như vậy:

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

Thêm tiền tố này với javascript:, và bạn đã có bookmarklet mới của bạn:

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

Khi nhìn vào nó hơn, và kiểm tra việc bookmarklet xuất hiện, đây là cấu trúc tổng thể mã:

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

Như bạn có thể thấy một chức năng ẩn danh đã được tạo ra, và jist của những gì đang xảy ra ở đây là họ đang tạo phần tử tập lệnh s = d.createElement ('script'), vào tài liệu hiện tại của bạn, sau đó tải phần còn lại của 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); 

Đối với việc xây dựng chuỗi cho href ... nó trông giống như l.href = u + '?u=' + e(l) + '&t=' + e(d.title); mang tính tham khảo nội bộ của họ để họ biết những gì trang/etc bạn đến từ đâu, tôi giả sử họ đang xây dựng những gì các mục danh sách Wish là từ Tiêu đề của trang (ít nhất là nó).

Bạn có thể thấy toàn bộ mã JS của họ vào đây, họ có một toàn bộ rất nhiều xảy ra: Amazong Bookmarklet JS Link

Nhưng như bạn thấy họ xây dựng toàn bộ sổ popup & các DOMelements thẳng từ 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 là chức năng tạo html nội bộ của chúng (tôi muốn đề nghị sao chép nó)

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

Vì vậy, tôi đoán về cơ bản bạn cần phải có bất cứ điều gì bạn muốn xuất hiện hoàn toàn đến từ JS, có nó tiêm vào các trang DOM tài liệu hiện tại, và có bạn đi.

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

Đây là mã cho bookmarklet "font-friend", tạo cửa sổ bật lên trên một trang web nhất định. Bạn chỉ có thể thay đổi các tham chiếu mã cho các nhu cầu cá nhân của bạn, nhưng nên cung cấp cho một điểm khởi đầu.

đây là liên kết với nó http://somadesign.ca/projects/fontfriend/

Answer 4

đơn giản, hầu hết các giải pháp trọng lượng nhẹ sẽ được sử dụng window.open.

Nội dung như sau sẽ hiển thị cửa sổ 600x250 ở giữa màn hình. Chỉ thanh tiêu đề sẽ hiển thị, có thể hiển thị tiêu đề của cửa sổ.

Dán này trong trường URL của trình duyệt của bạn để thử nó ra:

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