Передача переменных Javascript в URL
Я пытаюсь передать переменную javascript на страницу php через URL-адрес. Код ниже запускает php-страницу, но не получает переменную. Я написал код, используя window.location.href, и он отлично работает, проблема в том, что он загружает страницу tracker.php.
Ниже мой код.
<script type = "text/javascript">
var siteId = "VT0013";
</script>
<script type = "text/javascript" src = "http://www.domainame.com/tracker.php?siteId = "+ siteId ;>
</script>
PHP-страница
$siteId = $_GET["siteId"];
Как только я получаю siteId, я отправляю результат по электронной почте в качестве теста, это работает нормально, за исключением того, что я не получаю значение siteId. При использовании того же кода с window.location.href все работает нормально.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вам нужно использовать document.write для написания любого HTML, который содержит переменные JavaScript:
<script type = "text/javascript">
var siteId = "VT0013";
document.write('<script type = "text/javascript" src = "http://www.domainame.com/tracker.php?siteId='+encodeURIComponent(siteId)+'">
</script>')
</script>
Это равносильно написанию
<script type = "text/javascript">
var siteId = "VT0013";
</script>
<script type = "text/javascript" src = "http://www.domainame.com/tracker.php?siteId=VT0013"></script>
Отредактировано, чтобы правильно экранировать переменную JavaScript.
Обратите внимание, что не рекомендуется использовать document.write для загрузки скриптов из стороннего домена, потому что Google Chrome может не загружать скрипт, если соединение слишком медленное. См. https://developers.google.com/web/updates/2016/08/removing-document-write.
Если скрипт можно загрузить асинхронно, я рекомендую вместо этого этот метод, потому что он не замедлит анализатор HTML:
<script>
var siteId = "VT0013";
(function(d, s){
s = d.createElement("script");
s.src = "http://www.domainame.com/tracker.php?siteId = "+encodeURIComponent(siteId);
d.getElementsByTagName("head")[0].appendChild(s);
})(document)
</script>
Если он не использует document.write, скрипт не будет загружаться синхронно, как в его примере. В этом случае нет ничего плохого в использовании document.write.
@Brad Я обновил свой ответ, чтобы решить проблемы, на которые вы указали.
Я предполагаю, что, поскольку это называется tracker.php, вам просто нужно нажать на этот URL? Если это так, рассмотрите возможность использования Beacon API.
navigator.sendBeacon('https://example.com/tracker.php' {
siteId: 'VT0013'
});
Это приводит к запросу HTTP POST, но в любом случае это лучше для этого. Вам не придется беспокоиться о кэшировании. Кроме того, Beacon API будет по-прежнему работать, даже если запрос не завершен и страница выгружается.
Если вы действительно хотите вместо этого динамически загружать JavaScript, текущий способ сделать это — использовать import().
const siteId = 'VT0013';
await import (`https://example.com/tracker.php?siteId${encodeURIComponent(siteId)}`);
Наконец, если вам нужно динамически загрузить этот JavaScript, и этот скрипт должен выполняться в контексте остальной части страницы (т. е. не в модуле), то лучше всего добавить новый тег скрипта: https:/ /stackoverflow.com/a/8578840/362536
Независимо от того, что вы делаете, убедитесь, что вы избегаете данных, используемых в ваших URL-адресах и в вашем HTML.
Не используйте document.sendBeacon(). Он не загружает и не выполняет скрипты, а в старых браузерах вызывает ошибку, останавливающую любой код JavaScript, следующий за ним. Было бы упущением не поддерживать такие браузеры, как Internet Explorer и другие старые браузеры, потому что буквально миллионы людей все еще используют их. Внедрение тега скрипта может сработать, но только если скрипт можно загрузить асинхронно.
@PHPGuru Как я уже сказал в своем ответе, API-интерфейс маяка подходит только в том случае, если для этого достаточно сделать запрос к этому URL-адресу. Что касается поддержки браузера, это зависит от ваших потребностей. Beacon API поддерживается уже много лет. caniuse.com/beacon Разработчик должен найти решение, подходящее для его конкретного варианта использования, поэтому я объясняю компромиссы.
Это превосходное решение для меня, хотя и откровенно современное. Отличный ответ! Для тех, кто хочет быстрый способ старой школы, который действительно поддерживает IE из коробки, мой ответ, надеюсь, охватит это.
@Brad Я предполагаю, что вы правы в том, что OP просто нужно нажать на URL-адрес, и Navigator.sendBeacon() подойдет для этого. Но он существует всего несколько лет. Если вам просто нужно перейти по URL-адресу из другого источника, лучший способ сделать это — создать новое изображение с помощью new Image(), а затем изменить его свойство src, которое работает во всех браузерах. Вы также не должны использовать импорт для чего-то подобного, потому что он не нужен для такой простой задачи и не будет работать в старых браузерах. Вам лучше ввести тег скрипта, предполагая, что скрипт может работать асинхронно, что не подразумевалось, но не маловероятно
Вы можете просто сделать быстрый запрос XHR, если вам нужна поддержка старых браузеров без полифиллов:
var siteId = 'VT0013';
var xhr = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
xhr.open('GET', 'http://www.domainame.com/tracker.php?siteId=' + encodeURIComponent(siteId));
xhr.send();
Это просто альтернативное решение, ответ @Brad должен быть принят.
Это будет работать только в том случае, если ваш трекер находится в том же источнике. Чтобы заставить его работать на стороннем источнике, вам нужен соответствующий заголовок ответа Access-Control-Allow-Origin и современный веб-браузер. Если вы просто пытаетесь загрузить сторонний трекер, есть способы получше.
Не используйте
document.write(). stackoverflow.com/q/802854/362536 Есть гораздо лучшие методы. Кроме того, как и в случае с другим ответом здесь, вы, вероятно, включаете XSS. Вам нужно экранировать свои данные, если вы собираетесь использовать их в контексте HTML.