Загрузить веб-страницу из поля ввода по нажатию кнопки в iframe

Question

Я хочу получить URL от пользователя в поле ввода.Затем я хочу загрузить этот URL в iframe, когда пользователь нажимает кнопку LOAD.Вот что я сделал до сих пор, я попытался загрузить URL в iframe, но не получилось.пожалуйста помоги !Я впервые пользуюсь HTMl и Web-материалами.

function myFunction() {
  var x = document.getElementById("ur").value;
  document.getElementById("demo").innerHTML = x;

}

<h3>Enter the URl in input field</h3>

<p>Click the button to get the url displayed in the iframe.</p>



<form>
  Enter the URL: <input id="ur" type="text" name="url"><br>
  <input type="button" id="myBtn" onclick="myFunction()" value="Load">
</form>


<p id="demo"></p>

Answer 1

Обновите свою функцию до этого. используйте createElement javascript для создания и добавления в тело. Вы можете изменить его, чтобы добавить после любого другого элемента.

function myFunction() {
  var x = document.getElementById("ur").value;
  var ifrm = document.createElement("iframe");
  ifrm.setAttribute("src", x);
  ifrm.style.width = "640px";
  ifrm.style.height = "480px";
  document.body.appendChild(ifrm);
}

Answer 2

Set iframe src вот так:

function myFunction() {
  var x = document.getElementById("ur").value;
  document.getElementById("demo").innerHTML = x;
  document.getElementById('myIframe').src = x;
}

<h3>Enter the URl in input field</h3>

<p>Click the button to get the url displayed in the iframe.</p>

<form>
  Enter the URL: <input id="ur" type="text" name="url"><br>
  <input type="button" id="myBtn" onclick="myFunction()" value="Load">
</form>

<iframe id="myIframe" src="https://stackoverflow.com" width="500" height="200"></iframe>

<p id="demo"></p>

Обратите внимание, что в iframe вы не можете видеть много веб-сайтов, поскольку для них X-Frame-Options запрещен!