Change name of iframes/frames dynamically
I'm trying to have a website that hosts different applications (also websites) in iframes. Note: only one application is active (displayed) at a time. My problem is that links that rely on targets are loaded in the wrong iframe (the first that is found).
To avoid problem with links that rely on a specific target, the script changes the attribute 'name' of hidden iframes to something else and rename the current iframe to the correct name/target.
But when I click on a link, the site loads in the wrong frame.
To clarify my problem check out the following code. There are links to activate one of three iframes (the other two are hidden). When the user clicks on the sourceforge link, the page should be loaded into the active iframe (the one that is displayed at the time), but it is loaded into the first (ms) iframe.
Is there a way to fix this?
Using Firefox 3.6.11/Windows 7
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function activate(n){
var iframes = document.getElementsByTagName('iframe');
for(var i = 0; i < iframes.length; i++){
var f = iframes[i];
f.style.display = 'none';
f.name = 'hidden-'+i;
}
document.getElementById('target'+n).style.display = 'inline';
document.getElementById('target'+n).name = 'target';
}
</script>
</head>
<body>
<h1>Willkommen</h1>
<a href="http://sourceforge.net/" target="target">Load Sourceforge in current frame</a>
<br/>
<a href="javascript:activate(1);">MICROSOFT</a>
<a href="javascript:activate(2);">GOOGLE</a>
<a href="javascript:activate(3);">ORACLE</a>
<iframe id="target1" src="http://www.microsoft.com/" name="target" width="100%"开发者_如何学运维 height="400px">noframes</iframe>
<iframe style="display:none;" id="target2" src="http://www.google.com/" name="hidden-1" width="100%" height="400px">noframes</iframe>
<iframe style="display:none;" id="target3" src="http://www.oracle.com/" name="hidden-2" width="100%" height="420px">noframes</iframe>
</body>
</html>
There is a workaround for your requirement:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function activate(n){
var iframes = document.getElementsByTagName('iframe');
for(var i = 0; i < iframes.length; i++){
var f = iframes[i];
f.style.display = 'none';
f.name = 'hidden-'+i;
}
document.getElementById('target'+n).style.display = 'inline';
document.getElementById('target'+n).name = 'target';
}
function loadInActive(aTag) {
var iframes = document.getElementsByTagName('iframe');
for(var i = 0; i < iframes.length; i++){
var f = iframes[i];
if(f.style.display == "inline") {
f.src = aTag.href;
}
}
}
</script>
</head>
<body>
<h1>Willkommen</h1>
<a href="http://sourceforge.net/" target="target" onclick="loadInActive(this);return false;" >Load Sourceforge in current frame</a>
<br/>
<a href="javascript:activate(1);">MICROSOFT</a>
<a href="javascript:activate(2);">GOOGLE</a>
<a href="javascript:activate(3);">ORACLE</a>
<iframe id="target1" src="http://www.microsoft.com/" name="target" width="100%" height="400px">noframes</iframe>
<iframe style="display:none;" id="target2" src="http://www.google.com/" name="hidden-1" width="100%" height="400px">noframes</iframe>
<iframe style="display:none;" id="target3" src="http://www.oracle.com/" name="hidden-2" width="100%" height="420px">noframes</iframe>
</body>
</html>
加载中,请稍侯......
精彩评论