javascript - 如何根据文本字段中的用户输入更改 iframe URL？

Question

我有一个 iframe url，我想根据用户在文本字段中输入的内容来更改它。所以我有:

<iframe
    src="http://player.twitch.tv/?channel={CHANNEL}"
    height="720"
    width="1280"
    frameborder="0"
    scrolling="no"
    allowfullscreen="true">
</iframe>

我想将 {CHANNEL} 更改为用户在文本字段中输入并通过按钮提交的内容。例如，如果用户在文本字段中输入“TestName”，则新的 iframe URL 将变为 src="http://player.twitch.tv/?channel=TestName"

不知道如何执行此操作。

Answer 1

试试这个。请记住，输入未经过验证/保护。

function changeChannel(){
  document.getElementById("twitchFrame").src = "http://player.twitch.tv/?channel="+document.getElementById("channel").value;
}

<input type="text" id="channel"></input>
<button type="button" onClick="changeChannel();">Change Channel</button>
<iframe
    id="twitchFrame"
    src="about:blank"
    height="720"
    width="1280"
    frameborder="0"
    scrolling="no"
    allowfullscreen="true">
</iframe>