在引导选项卡上单击 iframe 内的更改内容答案

【问题标题】：On bootstrap tab click change content inside iframe在引导选项卡上单击 iframe 内的更改内容
【发布时间】：2017-05-04 00:06:29
【问题描述】：

我有一个 index.html 文件，其中有引导选项卡的标题和带有选项卡内容的 iframe。

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
    <script>
        function switchTabInIframe(tab) {
            var tabId = $('#iframe_1').contents().find('#1');
            $('.nav-tabs a[href="#' + tabId + '"]').tab('show');
        };
    </script>

    <div id="exTab2" class="container">
        <ul class="nav nav-tabs">
            <li class="active">
                <a href="#1" data-toggle="tab" onclick="switchTabInIframe('1')" ;>1</a>
            </li>
            <li>
                <a href="#2" data-toggle="tab" onclick="switchTabInIframe('1')">2</a>
            </li>
            <li>
                <a href="#3" data-toggle="tab" onclick="switchTabInIframe('1')">3</a>
            </li>
        </ul>
        <iframe src="iframe.html" height="300%" width="300" frameborder="0" name="iframe_1"></iframe>
    </div>
</body>
</html>

在 iframe.html 下方，我有标签的内容（正文）：

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="tab-content">
        <div class="tab-pane active" id="1">
            <h3>tab1</h3>
        </div>
        <div class="tab-pane" id="2">
            <h3>tab2</h3>
        </div>
        <div class="tab-pane" id="3">
            <h3>tab3</h3>
        </div>
    </div>
</body>
</html>

单击索引文件中的选项卡时，如何更改 iframe 中的内容？上面的代码不起作用...控制台没有错误... Thx

【问题讨论】：

你能编辑/修改 ifram.html 吗？

标签： javascript jquery html twitter-bootstrap iframe

【解决方案1】：

您需要创建并调用 iframe 页面中的函数。您的索引页面中的范围与 iframe 不同，用于切换选项卡。我建议这个更新..

在索引页面中，创建一个名为 switchframe(id) 的新函数并从您的 onclick 调用它

function switchframe(id) {
   document.getElementsByName('iframe_1').contentWindow.switchTabInIframe(id);
}

在 iframe.html 中

function switchTabInIframe(tab) {
       console.log('I can run');
       console.log(tab);
       //perform your tab switch now.
    };

请告诉我们结果..

【讨论】：

谢谢，这正是我需要的！

【解决方案2】：

这里有一个可能对您有所帮助的示例。当您单击标签时，它会运行一个函数，然后根据单击的选项卡更改 iframe 中的 attr src。这是使用 JQuery。

function switchTabInIframe(whichOne) {
    var iframesource = "";
    if (whichOne == 1) {
      iframesource = "http://google.com";
      } else if (whichOne == 2) {
      iframesource = "http://matthewbergwall.com";
      } else if (whichOne == 3) {
      iframesource = "http://stackoverflow.com";
      }
        $("#ciframe").attr("src", iframesource);
  }

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
    <script>
        function switchTabInIframe(tab) {
            var tabId = $('#iframe_1').contents().find('#1');
            $('.nav-tabs a[href="#' + tabId + '"]').tab('show');
        };
    </script>

    <div id="exTab2" class="container">
        <ul class="nav nav-tabs">
            <li class="active">
                <a href="#1" data-toggle="tab" onclick="switchTabInIframe(1)" ;>1</a>
            </li>
            <li>
                <a href="#2" data-toggle="tab" onclick="switchTabInIframe(2)">2</a>
            </li>
            <li>
                <a href="#3" data-toggle="tab" onclick="switchTabInIframe(3)">3</a>
            </li>
        </ul>
        <iframe src="iframe.html" height="300%" width="300" frameborder="0" name="iframe_1" id="ciframe"></iframe>
    </div>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

【讨论】：

这无济于事，我需要在 iframe 中操作 DOM，src 将始终相同。