Question

我有一个iframe，我想浏览一个包含前一个和下一个按钮的外部网站列表，但是我想在侧边栏上显示链接，所以点击后它会自动转到iframe中的该网站。

我之前曾尝试过一些带有ajax的php，还有常规的javascript / jquery和onclick事件等，并认为这将是一项相当容易的任务，但到目前为止我还没有能够正常工作。

我需要的页面的当前html是：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="resources/favicon.ico">

    <title>Site Browser</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/dashboard.css" rel="stylesheet">

    <style type="text/css">
        body,html,.main-display-area,.col-md-10 {
            height:100%;
        }

        .myframe {
            width: 100%; 
            height: 100%; 
            position:absolute;"
        }

        .frame-container {
            padding-left: 0px; 
            padding-top: 0px;
        }
    </style>

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="js/html5shiv.min.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->

  </head>

  <body>

    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">Site Browser</a>
        </div>

        <div>
            <form class="navbar-form navbar-right" id="navForm" method="post" action="/">
                <div class="form-group">
                    <input value="< Previous" id="previous" class="btn btn-success btn-fixed" type="button">
                </div>
                &nbsp;
                <div class="form-group">
                    <input value="Next >" id="next" class="btn btn-success btn-fixed" type="button">
                </div>
            </form>
        </div>

      </div>
    </nav>

    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-3 col-md-2 sidebar sidebar-style">
          <ul class="nav nav-sidebar sidebar-scrollable">
            <li class="active"><a href="http://stackoverflow.com">Stackoverflow.com</a></li>
            <li><a href="http://www.bing.com/">Bing</a></li>
            <li><a href="https://www.google.co.uk/">Google</a></li>
          </ul>
        </div>
      </div>
    </div>

    <div class="col-md-10 col-md-offset-2 frame-container">
        <iframe src="http://stackoverflow.com" id="myframe" class="myframe" frameborder="0"></iframe>
    </div>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="js/ie10-viewport-bug-workaround.js"></script>
  </body>
</html>

Answer 1

看起来你大部分都在那里。您只是错过了超链接上的某些目标：

<a href="http://www.bing.com/" target="myframe">Bing</a>

Answer 2

您尝试在此处框架中显示的至少两个网站（特别是Google和Stack Overflow）使用the X-Frame-Options header来阻止它们以帧显示。您的网站无法覆盖此标头 - 您需要选择要显示的其他网站，或者找到另一种方式来展示它们。

如何使用按钮和链接控制Iframes网站？

2 个答案: