带有iframe的HTML / CSS问题

问题描述 投票:0回答:1

因此,我基本上是为学校的Chromebook制作一个浏览器模拟器。许多站点都被封锁,每个人都可以看到我们的历史记录,但是我需要我的隐私。我不会放弃这个完整的仿真器,但是我希望它易于定制。另外,我想全屏显示iframe,但是每次尝试Stack Overflow教程时,它都会失败。我总是以顶部为界。我正在使用Chrome运行我的HTML文件。这是我到目前为止的HTML5代码。任何帮助将不胜感激。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Google</title>
    <link rel="shortcut icon" href="file:///home/chronos/u-59be51187b1ec64df00154b2375f9ffcad3e4500/MyFiles/NewBing/Files/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" type="text/css" href="file:///home/chronos/u-59be51187b1ec64df00154b2375f9ffcad3e4500/MyFiles/NewBing/Files/stylesheet.css" />
  </head>

  <body>
    <script type="text/javascript">
      function loadUrl() {
        document.getElementById('browser').src = document.getElementById("urltxtbox").value;
      }

      function refreshUrl() {
        history.forward();
        history.back()
      }

    </script>

    <p>
      <input type="text" id="urltxtbox"  class="urltxtbox" placeholder="Paste URL">
      <input type="button" id="urlRedirect" class="gobtn" value="Go" onclick="loadUrl()">
      <input type="button" id="back" class="backbtn" value="⇦" onclick="history.back()">
      <input type="button" id="forward" class="forwardbtn "value="⇨" onclick="history.forward()">
      <!--<input type="button" id="refresh" class="refreshbtn" value="⟳" onclick="refreshUrl()">-->
    </p>

    <iframe id="browser">Your browser doesn't support iframes</iframe>
  </body>
</html>

这是我的CSS样式表。您可以查看我的iframe属性,也请提供该刷新功能的帮助。对页面任何部分的任何建议都将有所帮助。

body,html
{
    background-color:#DDEEDD;
    padding:0px;
    margin:0px;
    height:100%;
    width:100%;
    overflow:hidden;
}

iframe
{
    display:block;
    margin:0;
    padding:0;
    border:0;
    height:100%;
    width:100%;
    overflow:hidden;
    background-color:#DDEEDD;
    position:absolute;
}

.urltxtbox
{
    font-size:1em;
    position:absolute;
    top:20px;
    left:20px;
    z-index:2
}

.gobtn
{
    font-size:1em;
    position:absolute;
    top:20px;
    left:265px;
    z-index:2;
}

.backbtn
{
    font-size:1em;
    position:absolute;
    top:20px;
    left:310px;
    z-index:2;
}

.forwardbtn
{
    font-size:1em;
    position:absolute;
    top:20px;
    left:355px;
    z-index:2
}

.refreshbtn
{
    font-size:1em;
    position:absolute;
    top:20px;
    left:400px;
    z-index:2;
}
html css iframe fullscreen
1个回答
0
投票

所以,我决定从头开始。我重新启动了它,现在它更好了。严重的是,如果有人知道出了什么问题,请回答,因为我不知道。

© www.soinside.com 2019 - 2024. All rights reserved.