Как бы изменить Src iframe с вводом текста?

Question

Итак, Mojang выпустил версию Minecraft для браузера, и я пытался добавить ее на свой сайт. Я успешно сделал это с помощью iframe, но люди хотели мультиплеер. Поскольку многопользовательский режим работает по ссылкам, цель состоит в том, чтобы ввести ссылку, которую они получают от кого-то другого, и изменить iframe со стандартного на новый многопользовательский.

Я пытался получить пользовательский ввод, присвоить его переменной и использовать document.write, чтобы перезаписать существующий iframe с новым src.

Вот что у меня есть. Примечание: это модально.

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.Я протестировал его в консоли разработчика на вашем сайте.

скриншот прилагается