如何使用按钮和链接控制 iframe 网站？答案

【问题标题】：How to control an Iframes site with buttons and links?如何使用按钮和链接控制 iframe 网站？
【发布时间】：2014-10-21 15:51:26
【问题描述】：

我有一个 iframe，我想通过一些上一个和下一个按钮浏览外部网站列表，但是我希望在侧边栏上也能看到链接，所以当点击它时，它会自动转到 iframe 中的那个网站。

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

我需要这个页面的当前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>

【问题讨论】：

是否跨域？如果您在 iframe 中加载某些 xDomain 窗口，它们将不会从窗口打开器获取通信。

标签： javascript php jquery html iframe

【解决方案1】：

看起来您已经完成了大部分任务。您只是在超链接上遗漏了一些目标：

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

【讨论】：

如果我添加这些并单击它们，它们会在 chrome 浏览器中打开一个新选项卡，而不是在页面上的 iframe 中打开网站。

【解决方案2】：

您尝试在此处显示在框架中的至少两个网站（特别是 Google 和 Stack Overflow）使用the X-Frame-Options header 来防止它们显示在框架中。此标题不能被您的网站覆盖 - 您需要选择要显示的其他网站，或寻找其他方式来展示它们。

【讨论】：

嗯，它可以是任何网站，我只是将这些作为示例列出，但我会有其他网站是的：D