在 iframe 中动态显示网页

Question

I want an input field with a submit button and a separate iframe where I can display a website made up from the input field.我想要一个带有提交按钮的输入字段和一个单独的 iframe，我可以在其中显示由输入字段组成的网站。 I have tried all sorts of things but nothing works.我尝试了各种各样的东西，但没有任何效果。 Can someone please tell me how I can achieve that.有人可以告诉我如何实现这一目标。 The text input field is a key to the page I want to display.文本输入字段是我要显示的页面的键。 What I want to do is to define an iframe with a page from my website and when the user enters a code in the text box, the iframe should display another page from my website.我想做的是用我网站上的一个页面定义一个 iframe，当用户在文本框中输入代码时，iframe 应该显示我网站上的另一个页面。 I want to run everything on my PC and nothing on the server.我想在我的 PC 上运行所有东西，而在服务器上什么也没有。 Below is my code:下面是我的代码：

<!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

Try This:尝试这个：

 $('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>

If this helps please Up vote and mark as answer 如果这有帮助，请投票并标记为答案

在 iframe 中动态显示网页

问题描述

1 个解决方案

解决方案1
0 2021-02-26 02:31:19

在 iframe 中动态显示网页

问题描述

1 个解决方案

解决方案1 0 2021-02-26 02:31:19

解决方案1
0 2021-02-26 02:31:19