1

Стоит задача получать данные из адресной строки браузера и вносить их в произвольные DIV, INPUT.

Идентичный пример кредитного кальтуратора магазина: https://stylus.ua/_form/credit/alfa?store_id=1&is_llc=f&ab_type=110&product_id=400364&product_name=iPhone%20%20iPhone%20XS%2064GB%20Gold&product_cost=20543&product_image=https://stylus.ua/thumbs/108x108/f6/f7/839775.jpeg&markup=&cat_name=iPhone&product_url=https://stylus.ua/apple-iphone-xs-64gb-gold-p400364c170.html

Эта ссылка выводится фреймом на сайте и подтягивает все данные.

Нашел на просторах stackoverflow прекрасный скрипт:

        function getParameterByName(name, url = window.location.href) {
            name = name.replace(/[\[\]]/g, '\\$&');
            var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
                results = regex.exec(url);
            if (!results) return null;
            if (!results[2]) return '';
            return decodeURIComponent(results[2].replace(/\+/g, ' '));
        }

        // query string: ?product_id=112233&product_name=Product1&product_price=799

        var product_id = getParameterByName('product_id'); // "112233"
        var product_name = getParameterByName('product_name'); // "Product1"
        var product_price = getParameterByName('product_price'); // "799"

Единственное, не понимаю как использовать полеченные данные из скрипта в HTML. Буду очень благодарен за подсказку!

6
  • document.querySelector('body').innerHTML = 'Контент'; Дайте элементы куда надо вставить данные.
    – doox911
    Commented 8 дек. 2020 в 11:35
  • К примеру: <input type="text" name="price" id="product_price" value=""><div><img class="product-img" src="/catalog/img/.jpg"></div><span class="product-name"></span> Полагаю нужно в блоки задавать ID для переменных изначально?
    – Alex Ruban
    Commented 8 дек. 2020 в 11:54
  • Например так: document.querySelector('#product_price').textContent = product_price
    – doox911
    Commented 8 дек. 2020 в 11:58
  • Спасибо большое за ответ! Попробовал применить, но получаю ошибку такого рода - [prnt.sc/vy82xl]. И Поле со стоимостью не заполняется значением из Get запроса.
    – Alex Ruban
    Commented 8 дек. 2020 в 12:31
  • Вы js - знаете?
    – doox911
    Commented 8 дек. 2020 в 12:33

2 ответа 2

2

Данные вставляются как innerText, innerHTML, value. Можно вообще создать data-атрибут.

Примеры:

function getParameterByName(name, url = window.location.href) {
  name = name.replace(/[\[\]]/g, '\\$&')
  var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
    results = regex.exec(url)
  if (!results) return null
  if (!results[2]) return ''
  return decodeURIComponent(results[2].replace(/\+/g, ' '))
}
const LINK =
  'https://stylus.ua/_form/credit/alfa?store_id=1&is_llc=f&ab_type=110&product_id=400364&product_name=iPhone%20%20iPhone%20XS%2064GB%20Gold&product_cost=20543&product_image=https://stylus.ua/thumbs/108x108/f6/f7/839775.jpeg&markup=&cat_name=iPhone&product_url=https://stylus.ua/apple-iphone-xs-64gb-gold-p400364c170.html'

// query string: ?product_id=112233&product_name=Product1&product_price=799

var product_id = getParameterByName('product_id', LINK) // "112233"
var product_name = getParameterByName('product_name', LINK) // "Product1"
var product_price = getParameterByName('product_price', LINK) // "799"

document.getElementById('product_id').innerText = product_id
document.getElementById('product_name').innerText = product_price
document.getElementById('product_price').innerText = product_name

document.getElementById('product_id_button').innerText = product_id
document.getElementById('product_name_input').value = product_name
div {
  background: #F5F5F5;
  padding: 1em;
  margin: 2em;
}
<div id="product_id">Пусто</div>
<div id="product_name">Пусто</div>
<div id="product_price">Пусто</div>
<input type="text" id="product_name_input">
<button id="product_id_button"></button>

1
  • .....+1........
    – doox911
    Commented 8 дек. 2020 в 12:33
2

Немного более лаконичный способ получения параметров.
Ну а вывести их в нужный блок, как уже сказали выше, можно через innerText или innerHTML для нужно элемента в случае с текстовым содержимым блока или value для input'a.

//Создаем объект с параметрами из текущего адреса страницы
let params = (new URL(document.location)).searchParams;
//Получаем нужный параметр по его имени
let name = params.get('param_name');


const link = 'https://stylus.ua/_form/credit/alfa?store_id=1&is_llc=f&ab_type=110&product_id=400364&product_name=iPhone%20%20iPhone%20XS%2064GB%20Gold&product_cost=20543&product_image=https://stylus.ua/thumbs/108x108/f6/f7/839775.jpeg&markup=&cat_name=iPhone&product_url=https://stylus.ua/apple-iphone-xs-64gb-gold-p400364c170.html';

let testParams = (new URL(link)).searchParams;
let productName = testParams.get('product_name');
let productCost = testParams.get('product_cost');

document.getElementById('product_name').innerText = productName
document.getElementById('product_cost').value = productCost
<div id="product_name"></div>
<input id="product_cost" type="text">

1
  • Плюсую, потому что используется современные средства языка - URL(link). Другой ответ от @4rth4s - также будет работать, но он устарел и лучше его не использовать. Минусить его я не буду. Commented 8 дек. 2020 в 14:10

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.