Получить параметр из URL и добавить его в iframe src

#javascript #html #iframe

#javascript #HTML #iframe

Вопрос:

Я ищу простой способ (с использованием JavaScript), чтобы часть URL-адреса страницы была добавлена в конец URL-адреса iframe src.

Пример, URL страницы: www.example.com/?id=XYZ

Затем мне нужна часть XYZ, которая является идентификатором, который будет добавлен в iframe src следующим образом:

И iframe src: www.otheradress.com/XYZ

Ответ №1:

Вы можете получить строку запроса из своего маршрута с window.location.search помощью (только то, что идет после ‘?’, включено), и вы можете проанализировать параметры с помощью URLSearchParams следующим const params = new URLSearchParams(window.location.search); образом.

После этого params создается объект с определенными методами, с помощью которого вы можете получить свой параметр по имени params.get('id'); .

Таким образом, вам нужно только объединить ваш базовый URL и этот параметр и передать его в src атрибут iframe.

Полный пример:

 const baseIframeUrl = 'www.otheradress.com/';
const urlParams = new URLSearchParams(window.location.search);
document.getElementById('#yourIframe').src = baseIframeUrl . urlParams.get('id');

Если вы хотите использовать атрибут src из HTML, это будет:

 const urlParams = new URLSearchParams(window.location.search);
document.getElementById('#yourIframe').src = document.getElementById('#yourIframe').src . urlParams.get('id');

Хотя имейте в виду, что этот подход потерпит неудачу при многократном вызове, если вы не сохраните где-нибудь исходный URL.
Кроме того, как указал mplungjan, вы не можете получить доступ к src iframe другого происхождения.

1. Вы не можете получить src iFrame другого происхождения

2. Также www.otheraddress.com недопустимый URL-адрес без протокола

3. Да, это просто взято из его примера кода, я не думаю, что это нуждается в разъяснении.

Ответ №2:

Я бы использовал URL и URLSearchParams

ПРИМЕЧАНИЕ: Вы не можете ПРОЧИТАТЬ iFrame src из iframe, который загрузил страницу из другого источника по соображениям безопасности

 const url = new URL("https://www.example.com/?id=XYZ"); // new URL(location.href);
const id = url.searchParams.get("id")
console.log(id)
const iFrameUrl = new URL("https://www.otheradress.com/")
iFrameUrl.pathname =id;
console.log(iFrameUrl.toString()); // here you can set the source of the iFrame