Javascript IFRAME和后退/前进按钮
我正在开发一个简单的.hta应用程序,它有一个控制面板和一个IFRAME 我添加了一个后退和前进按钮,但它们似乎不起作用。如果单击下面示例中的链接“a”和“b”,则后退和前进按钮不起任何作用 如何做到这一点Javascript IFRAME和后退/前进按钮,javascript,internet-explorer,iframe,browser-history,hta,Javascript,Internet Explorer,Iframe,Browser History,Hta,我正在开发一个简单的.hta应用程序,它有一个控制面板和一个IFRAME 我添加了一个后退和前进按钮,但它们似乎不起作用。如果单击下面示例中的链接“a”和“b”,则后退和前进按钮不起任何作用 如何做到这一点 test.hta =================================== <!DOCTYPE html> <html> <head> <title>Back / Forward Buttons</title>
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="output.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>
test.hta
===================================
后退/前进按钮
返回
向前地
a、 html
===================================
A.
A页-
b、 html
===================================
B
B页-
试试:
或
可能更好的方法是使用getElementByID获取您试图在其上使用历史记录的元素
iFrame的历史记录中也存在一些已知的跨浏览器问题,但我记不清当时发生了什么,但谷歌应该能够为您解答这些问题。我不得不使用以下方法手动跟踪iFrame中的页面更改:
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;
}
}
};
window.frames.output.history.go(+1);
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;
}
}
};