Изменить Iframe src на основе пользовательского ввода

avatar
Cyquna
8 августа 2021 в 20:32
82
1
0

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

Источник

Ответы (1)

avatar
Stephen
8 августа 2021 в 21:20
1

Чтобы изменить источник iframe, вам понадобится прослушиватель для изменения ввода, а когда это произойдет, измените источник iframe, обновив свойство src. Настроив прослушиватель, вы можете сделать что-то вроде этого: 

// Grab the element by ID
document.getElementById("example_input")
  // Add the event listener to "input" 
  .addEventListener("input", exampleFunc);
  
function exampleFunc(event){
  // Grab iframe by ID
  let iframe = document.getElementById("example");
  // Update the source
  
  // First grab the input that was typed into
  let input = event.target;
  // Next get the value of that input
  let newUrl = input.value;
  
  // Now update the "src" property of the iframe
  iframe.src = newUrl;
}
<html>

<head></head>

<body>
  <input type="url" value="https://example.com" id="example_input">
  <iframe id="example" src="https://example.com" width="1000" height="450" frameborder="0" scrolling="no"></iframe>
</body>

</html>

Хотя в этом случае вы можете обновлять его не при каждом вводе, а когда пользователь перестает печатать, решение которого есть в этом вопросе.

Обратите внимание, что многие веб-сайты не позволяют iframe устанавливать соединения по разным причинам (заголовок X-Frame-Options, политики безопасности контента и т. д.). Примерами таких сайтов являются Google и YouTube.