如何根据来自文本字段的用户输入更改 iframe URL？答案

【问题标题】：How to change iframe URL based on user input from text field?如何根据来自文本字段的用户输入更改 iframe URL？
【发布时间】：2017-08-09 17:53:39
【问题描述】：

我有一个 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"

不知道该怎么做。

【问题讨论】：

你有代码吗？我们可以帮助您解决代码的具体问题，但我们不会为您编写代码。您可以通过 JavaScript 事件来更改 iframe 的 src 属性。

标签： javascript html forms iframe

【解决方案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>

【讨论】：