如何从文本表单更改 Iframe？

Question

我想要一个 iframe，您可以在其中使用文本框更改它的 url。

<form action="/action_page.php">
 URL: <input type="text" name="firstname" value="test.com"> <input type="submit" value="Visit">
</form>
<iframe width="560" height="315" src="https://www.example.com"></iframe>

我将如何继续这样做？

Answer 1

function onClick() {
  const iframe = document.querySelector('#iframe');
  const input = document.querySelector('#input');
  
  iframe.src = input.value;
}

iframe {
  display: block;
  margin-top: 5px;
  width: 500px;
}

<input id="input" type="text">
<button onclick="onClick()">click</button>
<iframe id="iframe" src="https://example.com"></iframe>

如何从文本表单更改 Iframe？

How do I change an Iframe from a text form?

html

javascript

css

iframe

textbox