Question

<!DOCTYPE html>
<html>
  <head>
    <style>
    body{
      background-color:#ffffff
    }
    </style>
  </head>
  <body>
<!-- im attempting to make an iframe display a video the user types into 
the prompt.-->
<input id="txtUrl" style="width:82%;" placeholder="youtube.com/watch?v=(finish the url)" name="url" type="text" />

<iframe src="www.youtube-nocookie.com/embed/(I WANT THE USERS INPUT 
HERE)" allowfullscreen></iframe>
  </body>
</html>

我做到了这一点，我的思绪一片空白。每次我想到一个可能的解决方案，它只是让我的思绪离开，我又回到了混乱状态。这可能很容易解决，我只是愚蠢，但任何帮助都表示赞赏。

Answer 1

您想要设置iframe的var args = [ document.getElementById("input-username").value, document.getElementById("input-picture").value, document.getElementById("input-password").value ]; addNewPost.apply(this, args);属性。尝试在src事件中执行此操作。然后你可以立即看到变化。

keyup

我没有对代码进行测试，但您应该了解如何实现您想要的内容。

Answer 2

您只需获取输入值，然后将此值添加到iframe的src属性（添加到现有值）。这是解决方案（如果有什么不清楚的话 - 随意问）：

function changeSrc() {
  const elem = document.getElementsByTagName("iframe")[0];
  const inputVal = document.getElementById("txtUrl").value;
  elem.src += inputVal
  console.log(elem);
}

<input id="txtUrl" style="width:82%;" placeholder="youtube.com/watch?v=(finish the url)" name="url" type="text" />
<button onclick="changeSrc()">Change src</button>
<iframe src="www.youtube-nocookie.com/embed/" allowfullscreen></iframe>

如何使用文本框中的输入来更改iframe网址的一部分？

2 个答案: