Add a Javascript Button to change content of ifram

2019-04-08 14:08发布

站内问答 / JavaScript
1807 3 6

I am trying to create this page where I have a single Iframe and I want to add a button to show a next page in the iframe, and a button to show the previous page in the iframe.

I have a total of 4 pages to show in the iframe named 1.html 2.html 3.html 4.html and I would like the buttons to work going from 1 to 4 and then go back to 1 and so on.

the sketch is something like this:

            _________
           | IFRAME  |
           |         |
           ___________


    <<previous       Next >>

This is a simple script that I made to change the content of the iframe

This is the iframe / Button / function.

<iframe id="screen" width="609" scrolling="no" height="410" frameborder="0" align="middle" name="canal" src="1.html"></iframe>


<input type="button" onclick="content2()" class="butonactual" value="See 2">

<script> function content2() { document.getElementById('screen').src = "2.html"; } </script>

Thanks

3条回答
来，给爷笑一个
2楼-- · 2019-04-08 14:29

If I understand the question, you have 4 urls and are using a single iframe. If such is the case, use an array to store the urls and a counter (which is an index into the array). When next is pressed, increment the counter and switch the iframe url. Previous decrements the counter and does the same.

查看更多
0人赞 添加讨论(0) 举报
Melony?
3楼-- · 2019-04-08 14:43

Not too difficult, just change the src tag of the iframe. Let's assume the below is your html:

<body>
    <!-- Assuming 1.html is the first shown, you can
         initialize it as the first src to be displayed -->
    <iframe id="frame" src="1.html"></iframe>

    <a href="#" id="prev">Previous</a> <a href="#" id="next">Next</a>
</body>

Then you could do it as explained below:

jQuery

var currentView = 1,
    minView     = 1,
    maxView     = 4;

var changeViewNext = function() {
    if (currentView >= minView && currentView < maxView) {
        currentView++;
        $('#frame').prop('src', currentView + '.html');
    }
}

var changeViewPrev = function() {
    if (currentView <= maxView && currentView > minView) {
        currentView--;
        $('#frame').prop('src', currentView + '.html');
    }
}

// Then some click events
$('#prev').click(function(e) {
    e.preventDefault();
    changeViewPrev();
}); 

$('#next').click(function(e) {
    e.preventDefault();
    changeViewNext();
})

Alternatively, just add the markup to your anchor tags to call these functions:

<a href="#" onClick="changeViewPrev()">Previous</a>
<a href="#" onClick="changeViewNext()">Next</a>

UPDATE

If you wanted to use buttons instead of anchor tags, leave the jQuery the same, and just change your anchor tags for buttons, as such

<button id="prev">Previous</button> <button id="next">Next</button>

UPDATE2: Tested code using javascript only, no jQuery

<body>
    <!-- Assuming 1.html is the first shown, you can
         initialize it as the first src to be displayed -->
    <iframe id="frame" src="1.html"></iframe>

    <button onClick="changeViewPrev()">Previous</button>
    <button onClick="changeViewNext()">Next</button>
    <script>
        var currentView = 1,
            minView     = 1,
            maxView     = 4,
            frame       = document.getElementById('frame');

        function changeViewNext() {
            if (currentView >= minView && currentView < maxView) {
                currentView++;
                frame.src = currentView + '.html';
            }
        }

        function changeViewPrev() {
            if (currentView <= maxView && currentView > minView) {
                currentView--;
                frame.src = currentView + '.html';
            }
        }
    </script>
</body>
查看更多
0人赞 添加讨论(0) 举报
Explosion°爆炸
4楼-- · 2019-04-08 14:46

Using Jquery

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
  var locations = ["1.html", "2.html", "3.html","4.html"];
  var currentIndex = 0;
  var len = locations.length;
  $(document).ready(function(){
    $(':button').click(function() {
        currentIndex = this.value == "Next" ? 
                currentIndex < len - 1 ? ++currentIndex : len - 1 : 
                currentIndex > 0 ? --currentIndex : 0;
        $('#frame').attr('src', locations[currentIndex]);
    });
  });
</script>
</head>
<body>
<input type = "button" value = "Previous" />&nbsp;<input type = "button" value = "Next" />
<br />
<iframe id="frame" src="1.html"></iframe>
</body>
</html>

■Update

<html>
  <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script>
      var locations = ["1.html", "2.html", "3.html","4.html"];
      var currentIndex = 0;
      var len = locations.length;
      $(document).ready(function(){
        $(':button').click(function() {
            currentIndex = this.value == "Next" ? 
                currentIndex < len - 1 ? ++currentIndex : 0 : 
                currentIndex > 0 ? --currentIndex : len - 1;

            $('#frame').attr('src', locations[currentIndex]);
        });
      });
    </script>
  </head>
  <body>
    <input type = "button" value = "Previous" />&nbsp;<input type = "button" value = "Next" />
    <br />
    <iframe id="frame" src="1.html"></iframe>
  </body>
</html>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)