Question

我想要一个带有提交按钮的输入字段和一个单独的 iframe，我可以在其中显示由输入字段组成的网站。我尝试了各种各样的事情，但没有任何效果。有人可以告诉我如何实现这一目标。文本输入字段是我要显示的页面的键。我想要做的是定义一个带有我网站页面的 iframe，当用户在文本框中输入代码时，iframe 应该显示我网站的另一个页面。我想在我的 PC 上运行所有东西，而在服务器上什么都不运行。下面是我的代码：

<!DOCTYPE html>
<html>
<body>
  <div id="app">
  </div>
<style>
  #boxes {
    content: "";
    display: table;
    clear: both;
    width: 145%;
  }

div {
  float: left;
  height: 100px;
  width: 100%;
  padding: 0 0px;
}

#column0 {
  width: 5.9%;
}

#column1 {
  width:29.4%;
}

body {
  font-family: sans-serif;
  color:white;
  display: grid;
  height: 80vh;
  place-items: start;
  overflow-x:hidden;
}
</style>

<script>

  document.getElementById("app").innerHTML = `

    <main id="boxes">
    <div id="column0">
      <h4></h4>
    </div>
    <div id="column1">
      <input id="pageId" name="pageId" type="text" required minlength="1" 
      maxlength="4" pattern="[a-z0-9]+">
      <button id="pageIdBtn">Page ID</button>
    </div>
</main>
`;

var x = document.getElementById("pageIdBtn");
x.addEventListener("click", pageIdFunction);

function pageIdFunction() {
  var pageIdToInvoke = document.getElementById("pageId").value;
  var myPage = "mywebsite/" + pageIdToInvoke;
  var el = document.getElementById('userPage');
  el.src = myPage;
};

</script>

<iframe name="userPage" src="mywebsite/home" style="width:1500px; height: 
750px;">
</iframe>

</body>
</html>

Answer 1

试试这个：

$('input#url').on('propertychange paste keyup',function(){
  
  var url = this.value;
  $('#frame').attr('src', url);
  
});

iframe {
  position:fixed; 
  top:5; 
  left:0; 
  bottom:0; 
  right:0; 
  width:100%; 
  height:90%; 
  border:none; 
  margin:0; 
  padding:0; 
  z-index:99999;
}

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>display-webpage-in-iframe-dynamically</title>
</head>
<body>
  
  
  
<input type="text" id="url" name="url" value="https://">
  
<iframe src="" id="frame"></iframe>
</body>
</html>

如果这有帮助，请投票并标记为答案

在 iframe 中动态显示网页

1 个答案: