Twitter Bootstrap Question posted in

On bootstrap tab click change content inside iframe – Twitter bootstrap

I have and index.html file where I have headers for bootstrap tabs and iframe with tabs content.

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

Below iframe.html where I have content(body) of the tabs:

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

When clicking a tab in the index file how do I change it content that resides inside the iframe? The code above doesn’t work… There is no error in the console… Thx

Tags:

2

Answers


  1. 0

    Here in an example that might help you. When you click a tag, it runs a function that then changes the attr src in the iframe depending on what tab is clicked. This is using 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>
    Login or Signup to reply.
  2. 0

    You will need create and invoke a function that is in your iframe page. The scope in your index page is not the same as the iframe, to switch the tabs. I suggest this update..

    In the Index page, create a new function called switchframe(id) and call this from your onclick

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

    in iframe.html

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

    Please let us know the outcome..

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search