Получить текущий url iframe?

22 марта 2022, 11:40

Возможно ли и как получить текущий url iframe ( отличный от начального src ) ?

Answer 1

Текущий URL внутри iframe

Если речь идет о переходах пользователя внутри фрейма и попытках получить его текущий url, то это возможно только если вы обращаетесь к фрейму со своего сервера.

В таком случае подойдет:

document.getElementById("frame").contentWindow.location.href

Если же вы хотите получить текущий url, на котором находится пользователь внутри фрейма на другом сервере, то вы не сможете этого сделать из-за SameOrigin Policy.

Динамически меняющийся src

Если же у вас динамически меняется frame, например через скрипт, то его значение можно получить просто обратившись к src вашего фрейма через JS.

Вот так:

var frame = document.getElementById("frame");
alert(frame.src);

Пример работы всех решений ответа:

Запустите код и посмотрите.

var frame = document.getElementById("frame"); 
var change = document.getElementById("change"); 
var check = document.getElementById("check"); 
var checkURL = document.getElementById("checkURL"); 
 
change.addEventListener('click', (event) => { 
  frame.src = 'https://adudnik.ru/'; 
}); 
check.addEventListener('click', (event) => { 
  alert(frame.src); 
}); 
checkURL.addEventListener('click', (event) => { 
  alert(frame.contentWindow.location.href); 
});

.container { 
  width: 500px; 
  height: 450px; 
  display: flex; 
  flex-wrap: wrap; 
  justify-content: space-between; 
} 
 
.container #change { 
  flex: 0 0 48%; 
  position: relative; 
  padding: .75rem 1.25rem; 
  margin-bottom: 1rem; 
  border: 1px solid transparent; 
  border-radius: .25rem; 
  color: #0c5460; 
  background-color: #d1ecf1; 
  border-color: #bee5eb; 
} 
 
.container #check { 
  flex: 0 0 48%; 
  position: relative; 
  padding: .75rem 1.25rem; 
  margin-bottom: 1rem; 
  border: 1px solid transparent; 
  border-radius: .25rem; 
  color: #155724; 
  background-color: #d4edda; 
  border-color: #c3e6cb; 
} 
 
.container #checkURL { 
  flex: 0 0 100%; 
  position: relative; 
  padding: .75rem 1.25rem; 
  margin-bottom: 1rem; 
  border: 1px solid transparent; 
  border-radius: .25rem; 
  color: #721c24; 
  background-color: #f8d7da; 
  border-color: #f5c6cb; 
} 
 
.container iframe { 
  width: 100%; 
  height: 100%; 
  border: none; 
}

<div class="container"> 
  <button id="change">Изменить url</button> 
  <button id="check">Проверить src</button> 
  <button id="checkURL">Попробовать получить текущий URL</button> 
  <iframe id="frame" src="https://getbootstrap.com/"> 
</iframe> 
</div>