2011-12-14 43 views
10

Có cách nào có lập trình hoặc có thể là trình cắm trình duyệt cho phép người dùng tự ý chạy bất kỳ jQuery nào họ muốn trên trang web hiện được tải trong trình duyệt của họ không?Làm thế nào để chạy jQuery trực tiếp trên bất kỳ trang nào trong trình duyệt?

Sửa

động lực của tôi là để có thể kiểm tra cú pháp jQuery và lệnh trước thời hạn trên một trang và sau đó đi thêm chúng vào nguồn của nó hoặc đề nghị chỉnh đến webadmins mà trang tôi đã thử nghiệm với.

+0

Có plugin cho điều đó trong Chrome và bạn có thể sử dụng Greasemonkey cho firefox. Tôi không chắc chắn về IE –

+1

Có bảng điều khiển JavaScript tích hợp của trình duyệt (thường là Ctrl + Shift + J) hoặc [FireBug] (http://getfirebug.com/) hoặc bạn chỉ cần nhập 'javascript: alert ('hi'); 'vào thanh địa chỉ. Để tải jQuery, bạn có thể sử dụng [jQuerify Bookmarklet] (http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet/). Chính xác thì bạn đang cố gắng làm gì (hoặc ngăn chặn)? –

Trả lời

3

FireQuery là một phần mở rộng Firebug tuyệt vời có thể bao gồm jQuery cho bạn và từ đó bạn có thể sử dụng jQuery trong bảng điều khiển của mình.

"jQuerify: cho phép bạn bơm jQuery vào bất kỳ trang web"

+0

Tôi biết rằng có những câu trả lời tương tự nhưng tôi không thể nói ai trả lời đầu tiên (vì đã tha thứ cho tôi), tôi chỉ chọn lựa ... đây là cách tiếp cận đã giúp. – pulkitsinghal

-1

eval thực hiện bất kỳ chuỗi nào bạn vượt qua, nhưng nếu cách sử dụng của nó là 'thích hợp' là contested.

eval('$(function() { alert("hello"); }'); 

sẽ hiển thị một cảnh báo về tài liệu đã sẵn sàng (với điều kiện là jQuery có nguồn gốc trước khi eval được gọi).

0

Đối với phát triển trong firefox bạn có thể sử dụng Firebug với FireQuery.

19

Bạn có thể sử dụng bảng điều khiển của Chrome để làm điều đó. Nếu bạn đang sử dụng Chrome, hãy nhấp chuột phải vào trang, sau đó nhấp vào "Kiểm tra phần tử". Chuyển đến tab "Bảng điều khiển" và thử chạy $ === jQuery. Nếu bạn không gặp lỗi và kết quả là true, bạn đã có jQuery.

Nếu không, chạy sau để thêm jQuery để một trang:

var body = document.getElementsByTagName("body")[0]; 
var script = document.createElement('script'); 
script.type = "text/javascript"; 
script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"; 
body.appendChild(script); 

Sau khi chạy các lệnh này, jQuery nên được nạp vào bất kỳ trang web và sẵn sàng để sử dụng trong giao diện điều khiển :)

Mã trên sẽ hoạt động đối với bất kỳ trình duyệt nào có bảng điều khiển JavaScript.

Ngoài ra, có các bảng chữ cái (như Greasemonkey và FireQuery), nếu jQuery không được đưa vào trang, tự động chạy đoạn mã trên để tiêm jQuery để giúp bạn dễ dàng viết kịch bản và hack trên các trang của người khác.

+0

Ngoài ra, bạn có thể sử dụng người dùng mới của tôi, [jQuerify] (http://github.com/rfkrocktk/jQuerify). –

+0

5 dòng mã của bạn ở đây hoạt động tốt cho tôi. Khi tôi dán mã jQuerify của bạn vào bảng điều khiển Chrome của tôi và thực thi nó, điều đó không hoạt động. Các nhận xét này không hỗ trợ ngắt dòng nhưng dưới đây là những gì xuất hiện trong bảng điều khiển của tôi bắt đầu bằng "document.getElementsByTagName" ở cuối jQuerify: document.getElementsByTagName ("body") [0] .appendChild (script) ; } đúng $ === jQuery Tham chiếuLỗi: jQuery không được xác định – Blaine

2

Tôi đã viết một bookmarklet để kiểm tra các tài liệu cho jQuery, thêm nó vào <head> nếu nó không tồn tại, và sẽ hiển thị một thông báo (sử dụng jQuery) nếu jQuery được tải qua tập lệnh hoặc đã có trong tài liệu. Chỉ cần thêm mã này vào bookmark của bạn để có được những chức năng:

javascript: (function() 
{ 
    var body = document.getElementsByTagName("body")[0]; 
    var head = document.getElementsByTagName("head")[0]; 
    var el = document.createElement('div'); 
    el.id = 'jqbkstatusnote'; 
    el.style.position = 'fixed'; 
    el.style.top = '10px'; 
    el.style.left = '10px'; 
    el.style.textAlign = 'center'; 
    el.style.color = '#fff'; 
    el.style.padding = '3px'; 
    el.style.fontWeight = 'bold'; 
    el.style.display = 'none'; 
    el.style.zIndex = '999999999'; 
    el.style.boxShadow = '0px 0px 0px 1px #fff, 3px 3px 1px rgba(0,0,0,0.5)'; 
    if (typeof jQuery != 'function') 
    { 
     var script = document.createElement('script'); 
     script.type = "text/javascript"; 
     script.src = "http://code.jquery.com/jquery-latest.min.js"; 
     head.appendChild(script); 
     waitForJQ();   
    } 
    else 
    { 
     el.style.border = '1px solid #522'; 
     el.style.backgroundColor = '#744'; 
     el.innerHTML = 'jQuery already exists in this document!'; 
     body.appendChild(el); 
     jQuery('#jqbkstatusnote').fadeIn().delay(1000).fadeOut(function(){jQuery(this).remove();}); 
    } 
    function waitForJQ() 
    { 
     if (typeof jQuery != 'function') 
     { 
      window.setTimeout(waitForJQ, 100); 
     } 
     else 
     { 
      el.style.border = '1px solid #235'; 
      el.style.backgroundColor = '#457'; 
      el.innerHTML = 'jQuery added to document!'; 
      body.appendChild(el); 
      jQuery('#jqbkstatusnote').fadeIn().delay(1000).fadeOut(function(){jQuery(this).remove();}); 
     } 
    } 
})(); 
11

này sử dụng CDN của Google, và đó là HTTPS thân thiện, một dòng, và bọc:

(function(){var jQueryVersion="1";var a=document.createElement("script");a.src="//ajax.googleapis.com/ajax/libs/jquery/"+jQueryVersion+"/jquery.js";a.type="text/javascript";document.getElementsByTagName("head")[0].appendChild(a);})() 

Bạn có thể chỉ định các phiên bản của jQuery, ví dụ jQueryVersion="2.0.2".

Tất cả các phiên bản được liệt kê tại developers.google.com/speed/libraries/devguide.

2

Để thuận tiện để tiêm (và chỉ ra đó là presense) jQuery trong Chrome thậm chí vào trang HTTPS với không xung đột chế độ để Prototype (chỉ nếu Prototype có mặt trên trang quá) Bạn có thể sẽ thích jQuerify mở rộng (jQuerify for Chrome) chất lượng được chứng minh bởi hàng nghìn người dùng trong một số năm kinh nghiệm. Trong một cụm từ: "Tiết kiệm thời gian của bạn".

+0

Điều này! Bạn không chắc chắn lý do tại sao điều này không được đánh giá cao hơn chỉ là cố gắng nó ra và tuyệt đối tuyệt vời của nó để thử nghiệm một dòng hoặc 2 trên một trang. Cảm ơn bạn! – Sam

+0

Cảm ơn bạn vì những lời cảm kích! Tôi rất vui vì bạn thích nó. – Intervoice

+0

Không có vấn đề gì tôi ước rằng tôi đã bắt gặp một cái gì đó như thế này sớm hơn, số lần tôi đã ngồi gãi đầu vì một bộ chọn sai và tôi gắn bó tất cả các dòng console.log này để thử và tìm hiểu chính xác những gì bị hỏng, và khi làm việc trên các trang web trực tiếp và không phải cục bộ, điều này tiết kiệm rất nhiều thời gian không phải tải lên lại các tệp và thực hiện làm mới bộ nhớ cache. – Sam

Các vấn đề liên quan