Кажется, я не могу найти ничего работающего, но мне нужен HTML-код, который создает iframe на основе URL-адреса, введенного в текстовое поле. Я использую iframe для разблокировки веб-сайтов на своем школьном хромбуке, но это хлопотно, если я хочу просто проверить веб-сайт и посмотреть, как он работает в iframe, создав совершенно новый веб-сайт. Я просто хотел что-то, чтобы легко просмотреть URL-адрес в iframe.
Изменить Iframe src на основе пользовательского ввода
8 августа 2021 в 20:32
82
1
Ответы (1)
8 августа 2021 в 21:20
Чтобы изменить источник 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.