Làm cách nào để chuyển các tham số vào thẻ Script?

Tôi đã đọc hướng dẫn Tự làm widget - Cách nhúng trang web của bạn vào một trang khác cho XSS Widgets của Tiến sĩ Nic.

Tôi đang tìm cách chuyển các thông số vào thẻ script. Ví dụ, để làm cho công việc sau:

<script src="http://path/to/widget.js?param_a=1&amp;param_b=3"></script>

Có cách nào để làm việc này không?

Hai liên kết thú vị:

• Cách nhúng tiện ích con Javascript phụ thuộc vào jQuery vào một môi trường không xác định (thảo luận Stackoverflow)
• Bài viết về cách chuyển các tham số vào thẻ script

Tôi xin lỗi vì đã trả lời một câu hỏi quá cũ nhưng sau một giờ vật lộn với các giải pháp trên, tôi đã chọn những thứ đơn giản hơn.

<script src=".." one="1" two="2"></script>

Bên trong tập lệnh trên:

document.currentScript.getAttribute('one'); //1
document.currentScript.getAttribute('two'); //2

Dễ dàng hơn nhiều so với jquery HOẶC phân tích cú pháp url.

Bạn có thể cần polyfil cho doucment.currentScript từ câu trả lời của @Yared Rodriguez dành cho IE:

document.currentScript = document.currentScript || (function() {
  var scripts = document.getElementsByTagName('script');
  return scripts[scripts.length - 1];
})();

Tốt hơn nên sử dụng tính năng trong html5 5 Thuộc tính dữ liệu

<script src="http://path.to/widget.js" data-width="200" data-height="200">
</script>

Bên trong tệp script http://path.to/widget.js, bạn có thể lấy paremeters theo cách đó:

<script>
function getSyncScriptParams() {
         var scripts = document.getElementsByTagName('script');
         var lastScript = scripts[scripts.length-1];
         var scriptName = lastScript;
         return {
             width : scriptName.getAttribute('data-width'),
             height : scriptName.getAttribute('data-height')
         };
 }
</script>

Hiểu rồi. Loại hack, nhưng nó hoạt động khá tốt:

var params = document.body.getElementsByTagName('script');
query = params[0].classList;
var param_a = query[0];
var param_b = query[1];
var param_c = query[2];

Tôi chuyển các tham số trong thẻ script dưới dạng các lớp:

<script src="http://path.to/widget.js" class="2 5 4"></script>

Bài báo này đã giúp rất nhiều.

Một cách khác là sử dụng thẻ meta. Bất kỳ dữ liệu nào được cho là được chuyển đến JavaScript của bạn đều có thể được gán như sau:

<meta name="yourdata" content="whatever" />
<meta name="moredata" content="more of this" />

Sau đó, dữ liệu có thể được lấy từ các thẻ meta như thế này (thực hiện tốt nhất trong trình xử lý sự kiện DOMContentLoaded):

var data1 = document.getElementsByName('yourdata')[0].content;
var data2 = document.getElementsByName('moredata')[0].content;

Hoàn toàn không gặp rắc rối với jQuery hoặc những thứ thích, không cần hack và giải pháp thay thế, và hoạt động với bất kỳ phiên bản HTML nào hỗ trợ thẻ meta ...

JQuery có một cách để chuyển các tham số từ HTML sang javascript:

Đặt cái này vào myhtml.htmltệp:

<!-- Import javascript -->
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<!-- Invoke a different javascript file called subscript.js -->
<script id="myscript" src="subscript.js" video_filename="foobar.mp4">/script>

Trong cùng một thư mục, hãy tạo một subscript.jstệp và đặt tệp này vào đó:

//Use jquery to look up the tag with the id of 'myscript' above.  Get 
//the attribute called video_filename, stuff it into variable filename.
var filename = $('#myscript').attr("video_filename");

//print filename out to screen.
document.write(filename);

Phân tích kết quả:

Đang tải trang myhtml.html có 'foobar.mp4' được in ra màn hình. Biến có tên video_filename đã được chuyển từ html sang javascript. Javascript đã in nó ra màn hình và nó xuất hiện dưới dạng được nhúng vào html trong cha mẹ.

jsfiddle bằng chứng rằng những điều trên hoạt động:

http://jsfiddle.net/xqr77dLt/

Nếu bạn đang sử dụng jquery, bạn có thể muốn xem xét phương pháp dữ liệu của họ.

Tôi đã sử dụng một cái gì đó tương tự như những gì bạn đang thử trong phản hồi của mình nhưng như thế này:

<script src="http://path.to/widget.js" param_a = "2" param_b = "5" param_c = "4">
</script>

Bạn cũng có thể tạo một hàm cho phép bạn lấy trực tiếp các thông số GET (đây là những gì tôi thường sử dụng):

function $_GET(q,s) {
    s = s || window.location.search;
    var re = new RegExp('&'+q+'=([^&]*)','i');
    return (s=s.replace(/^\?/,'&').match(re)) ? s=s[1] : s='';
}

// Grab the GET param
var param_a = $_GET('param_a');

nó là một chủ đề rất cũ, tôi biết nhưng điều này cũng có thể hữu ích nếu ai đó đến đây khi họ tìm kiếm giải pháp.

Về cơ bản, tôi đã sử dụng document.currentScript để lấy phần tử từ nơi mã của tôi đang chạy và tôi lọc bằng cách sử dụng tên của biến mà tôi đang tìm kiếm. Tôi đã mở rộng currentScript với một phương thức được gọi là "get", vì vậy chúng tôi sẽ có thể tìm nạp giá trị bên trong tập lệnh đó bằng cách sử dụng:

document.currentScript.get('get_variable_name');

Bằng cách này, chúng ta có thể sử dụng URI chuẩn để truy xuất các biến mà không cần thêm các thuộc tính đặc biệt.

Đây là mã cuối cùng

document.currentScript.get = function(variable) {
    if(variable=(new RegExp('[?&]'+encodeURIComponent(variable)+'=([^&]*)')).exec(this.src))
    return decodeURIComponent(variable[1]);
};

Tôi đã quên về IE :) Nó không thể dễ dàng hơn ... Tôi không đề cập rằng document.currentScript là một thuộc tính HTML5. Nó chưa được bao gồm cho các phiên bản IE khác nhau (tôi đã thử nghiệm cho đến IE11, và nó vẫn chưa có). Để tương thích với IE, tôi đã thêm phần này vào mã:

document.currentScript = document.currentScript || (function() {
  var scripts = document.getElementsByTagName('script');
  return scripts[scripts.length - 1];
})();

Những gì chúng ta đang làm ở đây là xác định một số mã thay thế cho IE, mã này trả về đối tượng script hiện tại, được yêu cầu trong giải pháp để trích xuất các tham số từ thuộc tính src. Đây không phải là giải pháp hoàn hảo cho IE vì có một số hạn chế; Nếu tập lệnh được tải không đồng bộ. Các trình duyệt mới hơn nên bao gồm thuộc tính ".currentScript".

Tôi hy vọng nó sẽ giúp.

Nhờ jQuery, một giải pháp tuân thủ HTML5 đơn giản là tạo một thẻ HTML bổ sung, như div, để lưu trữ dữ liệu.

HTML :

<div id='dataDiv' data-arg1='content1' data-arg2='content2'>
  <button id='clickButton'>Click me</button>
</div>

JavaScript :

$(document).ready(function() {
    var fetchData = $("#dataDiv").data('arg1') + 
                    $("#dataDiv").data('arg2') ;

    $('#clickButton').click(function() {
      console.log(fetchData);
    })
});

Bản demo trực tiếp với mã ở trên: http://codepen.io/anon/pen/KzzNmQ?editors=1011#0

Trên bản demo trực tiếp, người ta có thể thấy dữ liệu từ các thuộc tính data- * của HTML5 được nối và in vào nhật ký.

Nguồn: https://api.jquery.com/data/

Đặt các giá trị bạn cần ở một nơi nào đó mà tập lệnh khác có thể truy xuất chúng, chẳng hạn như đầu vào ẩn và sau đó kéo các giá trị đó từ vùng chứa của chúng khi bạn khởi tạo tập lệnh mới của mình. Bạn thậm chí có thể đặt tất cả các tham số của mình dưới dạng chuỗi JSON vào một trường ẩn.

Tạo một thuộc tính có chứa danh sách các tham số, như sau:

<script src="http://path/to/widget.js" data-params="1, 3"></script>

Sau đó, trong JavaScript của bạn, hãy lấy các tham số dưới dạng một mảng:

var script = document.currentScript || 
/*Polyfill*/ Array.prototype.slice.call(document.getElementsByTagName('script')).pop();

var params = (script.getAttribute('data-params') || '').split(/, */);

params[0]; // -> 1
params[1]; // -> 3

Tôi muốn có các giải pháp với sự hỗ trợ của các trình duyệt cũ càng nhiều càng tốt. Nếu không, tôi muốn nói rằng currentScript hoặc phương thức thuộc tính dữ liệu sẽ là phong cách nhất.

Đây là phương pháp duy nhất chưa được đưa ra ở đây. Đặc biệt, nếu vì lý do nào đó bạn có lượng lớn dữ liệu, thì tùy chọn tốt nhất có thể là:

lưu trữ cục bộ

/* On the original page, you add an inline JS Script: */
<script>
   localStorage.setItem('data-1', 'I got a lot of data.');
   localStorage.setItem('data-2', 'More of my data.');
   localStorage.setItem('data-3', 'Even more data.');
</script>

/* External target JS Script, where your data is needed: */
var data1 = localStorage.getItem('data-1');
var data2 = localStorage.getItem('data-2');
var data3 = localStorage.getItem('data-3');

localStorage có hỗ trợ trình duyệt hiện đại đầy đủ và hỗ trợ tốt đáng ngạc nhiên cho các trình duyệt cũ hơn, trở lại IE 8, Firefox 3,5 và Safari 4 [11 năm trở lại] trong số những trình duyệt khác.

Nếu bạn không có nhiều dữ liệu, nhưng vẫn muốn hỗ trợ trình duyệt rộng rãi, có thể lựa chọn tốt nhất là:

Thẻ meta [bởi Robidu]

/* HTML: */
<meta name="yourData" content="Your data is here" />

/* JS: */
var data1 = document.getElementsByName('yourData')[0].content;

Lỗ hổng của điều này là vị trí chính xác để đặt thẻ meta [cho đến khi HTML 4] nằm trong thẻ head và bạn có thể không muốn dữ liệu này ở đó. Để tránh điều đó hoặc đặt thẻ meta trong nội dung, bạn có thể sử dụng:

Đoạn ẩn

/* HTML: */
<p hidden id="yourData">Your data is here</p>

/* JS: */
var yourData = document.getElementById('yourData').innerHTML;

Để được hỗ trợ nhiều hơn cho trình duyệt, bạn có thể sử dụng lớp CSS thay vì thuộc tính ẩn:

/* CSS: */
.hidden {
   display: none;
}

/* HTML: */
<p class="hidden" id="yourData">Your data is here</p>

Đây là Giải pháp cho jQuery 3.4

<script src="./js/util.js" data-m="myParam"></script>

$(document).ready(function () {
    var m = $('script[data-m][data-m!=null]').attr('data-m');
})