IFRAME and back / forward button_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-04-11 13:41 出处：网络

I am working on a simple .hta application which has a control pane and an IFRAME. I have added a back and forward button, but they do not appear to work. If links \"a\" and \"b\" in the following exa

I am working on a simple .hta application which has a control pane and an IFRAME.

I have added a back and forward button, but they do not appear to work. If links "a" and "b" in the following example are clicked, the back and forward buttons do not do anything.

How can this be achieved?

test.hta
===================================
<!DOCTYPE html>
<html>
<head>
    <title>Back / Forward Buttons</title>
    <hta:application id="test" applicationname="test" icon="res/icon.ico" showintaskbar="yes" singleinstance="yes">
</head>
<body>
    <div class="strip">
        <button onclick="o开发者_JAVA百科utput.history.back(); return false">Back</button>
        <button onclick="output.history.forward(); return false">Forward</button>
    </div>

    <div id="iframe-wrap" class="iframe-container">
        <iframe id="output" name="output" src="a.html" width="100%" border="0" frameborder="no" scrolling="yes"></iframe>
    </div>
</body>
</html>

a.html
===================================
<!DOCTYPE html>
<html>
    <head><title>A</title></head>
    <body>PAGE A - <a href="b.html">Go to B</a></body>
</html>

b.html
===================================
<!DOCTYPE html>
<html>
    <head><title>B</title></head>
    <body>PAGE B - <a href="a.html">Go to A</a></body>
</html>

Try:

window.frames.output.history.forward();

window.frames.output.history.go(+1);

Probably even better would be to use getElementByID to get the element your trying to use history on.

There are also some known cross browser issues with history on iFrame's but I can't remember exactly what at the moment, but Google should be able to answer that for you.

I ended up having to track page changes in iFrame manually using the following:

    var iFrameHistory = {
        history : [],
        pos     : 0,
        ignore  : false,

        updateUI: function() {
            var el;

            // Enable / disable back button?
            el = document.getElementById('back');
            if (iFrameHistory.pos === 1)
                el.className = 'disabled';
            else
                el.className = '';

            // Enable / disable forward button?
            el = document.getElementById('forward');
            if (iFrameHistory.pos >= iFrameHistory.history.length)
                el.className = 'disabled';
            else
                el.className = '';
        },

        back: function() {
            var newPos = Math.max(1, this.pos - 1);
            if (newPos !== this.pos) {
                this.pos = newPos;
                this.ignore = true;
                document.getElementById('output').src = this.history[ this.pos - 1 ];

                this.updateUI();
            }
        },
        forward: function() {
            var newPos = Math.min(this.history.length, this.pos + 1);
            if (newPos !== this.pos) {
                this.pos = newPos;
                this.ignore = true;
                document.getElementById('output').src = this.history[ this.pos - 1 ];

                this.updateUI();
            }
        },
        reload: function() {
            document.getElementById('output').contentWindow.location.reload();
        },
        onload: function() {
            if (!this.ignore) {
                var href = document.getElementById('output').contentWindow.location.href;
                if (href !== this.history[ this.pos - 1 ]) {
                    this.history.splice(this.pos, this.history.length - this.pos);
                    this.history.push(href);
                    this.pos = this.history.length;

                    this.updateUI();
                }
            }
            else {
                this.ignore = false;
            }
        }
    };