отримати параметри файлу під час виклику JavaScript

Я намагаюся створити скрипт, який полегшить користувачам використовувати спеціальну кнопку, і я маю щось подібне

<script src="http://host.com/file.js?id=12345"></script>

Мені цікаво, як я можу отримати в file.js параметр id .

якщо я використовую document , він отримає оригінальну HTML-сторінку, яка має лінію скрипту, і що мені потрібно, це id .

Чи є якийсь спосіб отримати цей ідентифікатор успішно? Якою має бути сфера діяльності?


додано

ідея полягає в тому, що я можу мати кілька кнопок на сторінці, наприклад мати невеликий і просто список:

  • <script src="http://host.com/file.js?id=12345"></script>
  • <script src="http://host.com/file.js?id=23456"></script>
  • <script src="http://host.com/file.js?id=34567"></script>

це в кінцевому підсумку буде перекладено на


перелік вище виглядатиме так у HTML:

enter image description here

Моє єдине питання полягає в тому, що я не можу призначити правильний ідентифікатор для атрибута data-id , оскільки він створюється в file.js .


результат

з відповіді Paulpro я зрозумів, що працює над його ідеєю і знаю, що клієнт буде завантажувати набагато більше скриптів, а декілька з id . Я трохи змінив його для остаточної та робочої версії:

var id = (function(){
    var scripts = document.getElementsByTagName('script');
    for(var i = 0, result = {}; i < scripts.length; i++)
        if(scripts[i].hasAttribute('data-viewfileid'))
            result['id'] = decodeURIComponent(scripts[i].getAttribute('data-viewfileid'));
    return result['id'];
})();

var html = 'V40 Watch the video';
document.write(html);

сценарій для користувача буде тільки:

<script data-viewfileid="4444" src="file.js" type="text/javascript"></script>
3
це приклад ... наприклад, я можу мати хорошу сторінку, яка говорить про два відео, і розробник хоче встановити дві кнопки, щоб користувач побачив їх, але вони матимуть різні ідентифікатори ... - Це простий "легкий додати кнопку "скрипт".
додано Автор balexandre, джерело
Не використовуйте HTML, динамічно створюйте кнопки з JS. Саме так працює Facebook - він створює весь вміст динамічно.
додано Автор Ivan Kuckir, джерело
Чому ви помістіть теги script всередині неупорядкованого списку? Це не семантично правильний HTML. Ви хочете відтворити шаблони на стороні клієнта?
додано Автор acconrad, джерело
Але цей приклад недоліком - ви не повинні робити теги сценаріїв всередині неупорядкованих списків. Це не те, що мали на увазі теги скриптів - ви не перетворюєте теги скриптів в прив'язки, ви повинні створити ці кнопки динамічно і завантажувати теги сценаріїв внизу сторінки, подивіться мою відповідь на деталі.
додано Автор acconrad, джерело

6 Відповіді

JavaScript нічого не знає про тег сценарію, який його завантажив. Проте є кілька обхідних рішень.

Якщо файл попередньо обробляється на сервері, ви можете зробити сервер відображення значення у відповідь:

(function() {
  var id = <%= params.id %>;
  //other stuff here
}());

Або ви можете надати скриптовому тегу ідентифікатор, і ваш код знайде його та витягне URL-адресу.

HTML:

<script src="http://host.com/file.js?id=12345" id="myscript"></script>

JS:

var id = document.getElementById('myscript').split('id=')[1];

Або в сучасних браузерах ви могли б зробити щось схоже на те, щоб знайти теги скриптів, які відповідають тому, що ви знаєте цей сценарій.

var scriptTag = document.querySelector('script[src^="http://host.com/file.js"]');
var id = scriptTag.src.split('id=')[1];
1
додано
@balexandre Тоді ви робите це неправильно ... Замість того, щоб включити один скрипт і мати кілька вузлів-заповнювачів: <div class = "mybutton" data-id = "12345> . все .mybutton і замініть їх своїми користувальними кнопками відповідно до ідентифікатора.
додано Автор Alex Wayne, джерело
@ balexandre Див мою альтернативну відповідь, яка описує те, що ви хочете робити, але не відповідає на конкретне запитання, яке ви задали ...
додано Автор Alex Wayne, джерело
Я коментую так само, як в acconrad відповідь: шлях шлях я не можу мати 2 кнопки на тій же сторінці: питання оновлено
додано Автор balexandre, джерело
@balexandre Перший варіант тут буде чудово працювати для декількох кнопок, якщо ви використовуєте мову на стороні сервера (що я гадаю, що ви робите, оскільки ви використовуєте параметри запиту, щоб завантажувати ваші скрипти).
додано Автор apsillers, джерело

Згідно з вашими поясненнями, що ви просите, як це зробити, це не те, що ви хочете зробити.

Замість цього включити один сценарій і мати кілька вузлів-заповнювачів.

HTML:

<script src="myscript.js"></script>

JS:

// myscript.js
var buttons = document.getElementsByClassName('mybutton');
for (var i = 0; i < buttons.length; i++) {
  var button = buttons[i];
  button.innerHTML = "my button html template here with id: "+ button.dataset.id;
}

See it work here: http://jsfiddle.net/zAdnB/

1
додано

Ви можете отримати останній елемент скрипту на сторінці (який завжди буде виконуватись зараз):

var scripts = document.getElementsByTagName('script');
var s = scripts[scripts.length - 1];

Потім змініть одне з аналізаторів рядків запитів із цього питання , щоб працювати з це скрипти властивості src :

var url = s.src;
var qs = url.substring(url.indexOf('?') + 1).split('&');
for(var i = 0, result = {}; i < qs.length; i++){
    qs[i] = qs[i].split('=');
    result[qs[i][0]] = decodeURIComponent(qs[i][2]);
}

Це дасть вам об'єкт, що містить всі властивості рядка-запиту поточного скрипту. Ви можете просто отримати доступ до таких властивостей, як:

result['id'];//'12345'

У підсумку

Щоб отримати параметр id з файлу file.js, додайте наступний код у верхню частину файла .js:

var id = (function(){

    var scripts = document.getElementsByTagName('script');
    var s = scripts[scripts.length - 1];
    var qs = s.src.substring(s.src.indexOf('?') + 1).split('&');
    for(var i = 0, result = {}; i < qs.length; i++){
        qs[i] = qs[i].split('=');
        result[qs[i][0]] = decodeURIComponent(qs[i][3]);
    }

    return result['id'];
})();

Переконайтеся, що це не у будь-яких функціях зворотного виклику, як-от зворотний виклик DOMReady.

Edit:

You can probably reduce your script to:
var scripts = document.getElementsByTagName('script');
var id = scripts[scripts.length - 1].getAttribute('data-viewfileid');

var html = 'V40 Watch the video';
document.write(html); 
1
додано
Я змінив скрипт, оскільки у розробника html, ймовірно, є набагато більше скриптів, а деякі - з id , але ваша ідея дійсно добре, я оновлю свою відповідь з кінцевим скриптом для подальшого використання. Дякую!
додано Автор balexandre, джерело
@ColinDeClue Це має бути у файлі file.js і поза будь-якими функціями. Я додав до кінця моєї відповіді записку.
додано Автор Paulpro, джерело
@balexandre Привіт, будь ласка, зверніть увагу, що я оновив свою відповідь за допомогою скороченого сценарію, який, як ви вважаєте, можна використовувати замість циклу.
додано Автор Paulpro, джерело
(який завжди буде виконуватись зараз) Чи не буде це правдою, якщо ви маєте виклик функції для іншого файлу JS?
додано Автор Colin DeClue, джерело

Ще одне рішення - це розбирати файли .js з інтерпретатором php. Наприклад, в конфігурації apache:

AddType application/x-httpd-php .js

І в JS:

alert('<?=$_GET["id"]?>');
1
додано

Ви можете помістити ідентифікатор на будь-який об'єкт, включаючи тег script . Отже, ви можете зробити щось на зразок цього:

HTML:

<script id="myScript" src="http://host.com/file.js?id=12345"></script>

JS:

document.getElementById('myScript').src.split('=')[1]; to get the ID from that particular example string.

If that query string represents a timestamp (in which case you need the latest version) you can modify the JavaScript code to fetch the latest <script> tag like so:

var scripts = document.getElementsByTag('script');
var latestScriptId = scripts[scripts.length-1].src.split('=')[1];

EDIT: In the context of your new edit, you would then take latestScriptId and assign it to the data.id attribute corresponding to the button you would like to create...though again, semantically, it would just make more sense to use HTML's given id attribute, and additionally, since you are not using the href property for the anchor tag, you're better off using a <button> element. So something like this would suffice:

var myButton = document.createElement('button');
myButton.className += 'view40btn';
myButton.id = latestScriptId;
1
додано
таким чином, я ніколи не можу мати 2 кнопки на тій же сторінці ... не добре для мене :(
додано Автор balexandre, джерело
так, але я б завантажувати інші правильно потім? ... питання оновлено
додано Автор balexandre, джерело
@ balexandre ви можете подивитися на тег останнього так далеко скрипта
додано Автор John Dvorak, джерело

Код Javascript не "усвідомлює", що він є частиною деякого файлу. JS-файл не "виконуваний", немає основного способу, який слід запустити після завантаження файлу. Ви не можете передавати йому параметри GET - незрозуміло, як їх слід інтерпретувати.

На вашій HTML-сторінці ви повинні прослухати метод "onload", а потім викликати функцію з вашого файлу з вашим параметром.

0
додано
ІТ КПІ - JavaScript
ІТ КПІ - JavaScript
504 учасників

співтовариство javascript розробників в Telegram