javascript - 在 iframe 中单击按钮时从输入字段加载网页

Question

我想从输入字段中的用户那里获取 URL。然后我想在用户单击“加载”按钮时在 iframe 中加载该 URL。这是我到目前为止所做的，我试图在 iframe 中加载 URL 但失败了。请帮忙 !我是第一次使用 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

像这样设置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 设置为 deny!