如何使用文本输入更改 iframe 的 src？

Question

所以，Mojang 为浏览器发布了一个 Minecraft 版本，我一直在尝试将它添加到我的网站。我用 iframe 成功地做到了这一点，但人们想要多人游戏。由于多人游戏通过链接工作，因此目标是输入他们从其他人那里收到的链接，并将 iframe 从标准的 iframe 更改为新的多人游戏。

我尝试的是获取用户输入，将其分配给变量，然后使用 document.write 用新的 src 重写现有 iframe。

这就是我所拥有的。注意：它是模态的。

input[type=text], input[type=password] {
  width: 300px;
}
.cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
  position: relative;
}

img.avatar {
  width: 40%;
  border-radius: 50%;
}

.container {
  padding: 16px;
}

span.psw {
  float: right;
  padding-top: 16px;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  padding-top: 60px;
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button (x) */
.close {
  position: absolute;
  right: 25px;
  top: 0;
  color: #000;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: red;
  cursor: pointer;
}

/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)} 
  to {-webkit-transform: scale(1)}
}
  
@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  span.psw {
     display: block;
     float: none;
  }
  .cancelbtn {
     width: 100%;
  }
}
.button {
  color: white;
  background-color: #4CAF50;
  border-color: #ccc;
  font-size: 14px;
  font-weight: 400;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  padding: 6px 12px;
}

<div id="container">
<div align="center"><iframe id="change" name="change" width="800" height="500" src="//classic.minecraft.net"></iframe></div>
 <div>
 <button class="button" id="button"><b>Fullscreen</b> </button>
 <button class="button" id="modal" onclick="document.getElementById('id01').style.display='block'"><b>Multiplayer</b></button>
 </div>
 <script src="/fullscreen.js"></script>
 <script>
   function changeIframe() {
  document.write(" <iframe  id='change' name='change' src='#" + input + "' width='800'  height='500'   allowfullscreen></iframe>");
}
 </script>
 <script>   
 var input = document.getElementById("detroit");
 </script>
 <div id="id01" class="sprckn-modal">
  
<form class="modal-content animate">
    <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
  
  
  <div class="sprckn-modal-content">
    <label for="link"><b>Paste Multiplayer Link Here</b></label>
    <center><input type="text" onsubmit="changeIframe()" id="detroit" placeholder="https://classic.minecraft.net/?join=somelettersand#s" name="link" required></center>
  </div>
  
  <div class="container" style="background-color:#f1f1f1">
    <center><button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button></center>
</form>
  </div>
</div>
`

绝对没有 iframe 的任何部分发生变化，但我的网站 URL 会发生变化，并带有 ?link=(linkhere)。在https://sprocken.com/game/minecraft/ 可以更好地展示它。

Answer 1

更改现有的 iframe 源：

function changeIframe(url) {
  document.getElementById('change').src = url;
}

使用onchange 事件而不是onsubmit：

<input type="text" id="minecraftInput" onchange="changeIframe(this.value)" id="detroit" placeholder="https://classic.minecraft.net/?join=somelettersand#s" name="link" required>

Answer 2

你是说这个吗？

var url = $('#detroit').value;
$('iframe').setAttribute('src', url);

这将帮助您将在文本框中输入的 url 添加到 iframe src。我在您网站的开发者控制台中对其进行了测试。

screenshot attached