Question

我有和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

Answer 1

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

＆＃13;

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);
  }

＆＃13;

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

＆＃13;

Answer 2

您需要创建并调用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.
    };

请告诉我们结果..

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

2 个答案: