Question

因此，Mojang为浏览器发布了一个Minecraft版本，我一直在尝试将其添加到我的网站中。我使用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的任何部分更改，但是我的网站网址却更改了，并带有？link =（linkhere）。最好在https://sprocken.com/game/minecraft/上进行展示。

Answer 1

你是这个意思吗？

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

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

screenshot attached

Answer 2

更改现有的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>

如何通过文本输入更改iframe的src？

2 个答案: