IFRAME and back / forward button
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();
or
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;
}
}
};
加载中,请稍侯......
精彩评论