Multiple iframes - alternate display

Question

I'm trying to implement something that is already working fine in Firefox and Safari but badly on Chrome and IE.

I'm trying to load 3 spreadsheets hosted on OneDrive in iframes. Only one of them it's showing and the user can choose which one to see on by a menu. In Firefox it seems to work fine, but in Chrome and IE the first time the user chooses the others spreadsheets a new tab is opened with them.

To show and hide the iframes I use the following code:

<script>
function hideElement (element) {
if (element.style) {
element.style.display = 'none';
}
}

function showElement (element) {
if (element.style) {
    element.style.display = '';
    if (element.name=='Jun') {
        document.getElementById('J').setAttribute("name","Jun2"),
        document.getElementById('J').contentWindow.location.reload();
    }
    if (element.name=='Fem') {
        document.getElementById('F').setAttribute("name","Fem2"),
        document.getElementById('F').contentWindow.location.reload();
    }
}
}
</script>

When the user choose the other spreadsheets the selection it's made with:

<div id="menu">

                            <li>
                                <a href="" target="MeM" onclick="
if (document.getElementById) {
iframe1 = document.getElementById('MM'),
iframe2 = document.getElementById('J'),
iframe3 = document.getElementById('F'),
showElement(iframe1),
hideElement(iframe2),
hideElement(iframe3);
}
return false;">MASCULINO E MISTO</a>
                            </li>
                            <li>
                                <a href="https://onedrive.live.com/embed?cid=0504820FBAD31EB3&resid=504820FBAD31EB3%2113113&authkey=AL2q5_OmgBN1EMg&em=2&wdAllowInteractivity=False&Item=Imprimir!%C3%81rea_de_Impress%C3%A3o&wdHideGridlines=True" target="Jun2" onclick="
if (document.getElementById) {
iframe1 = document.getElementById('MM'),
iframe2 = document.getElementById('J'),
iframe3 = document.getElementById('F'),
hideElement(iframe1),
showElement(iframe2),
hideElement(iframe3);
}
return false;">JÚNIOR</a>
                            </li>
                            <li class="last">
                                <a href="https://onedrive.live.com/embed?cid=0504820FBAD31EB3&resid=504820FBAD31EB3%2113105&authkey=AOnm0S8qdM36dMs&em=2&wdAllowInteractivity=False&Item=Imprimir!%C3%81rea_de_Impress%C3%A3o&wdHideGridlines=True" target="Fem2" onclick="
if (document.getElementById) {
iframe1 = document.getElementById('MM'),
iframe2 = document.getElementById('J'),
iframe3 = document.getElementById('F'),
hideElement(iframe1),
hideElement(iframe2),
showElement(iframe3);
}
return false;">FEMININO</a>
                            </li>

</div>

Why I used this approach? Because I had to change the iframes' name attribute.

The iframe with one of the spreadsheets (Ranking "Masculino e Misto") starts as active. At first when I switched to one of the other iframes they were displayed without any content (the file was not loading). So, I had to 'reload' 'onclick' those iframes:

document.getElementById(' ... ').contentWindow.location.reload();

This created the problem that every time the other spreadsheets were opened their file was downloaded, slowing the transition. So I thought of only reloading the iframe the first time that it's spreadsheet was opened. The way I managed to do that was changing the name attribute of the iframes (it reloads with the previous name then no longer reloads).

I think that the Firefox first changes the name and then loads the iframe, which is ok, but in Chrome and IE the name is only changed afterwards resulting in a new opened tab .

Any ideas how to solve this? Thanks

P.S.- My first try was to have only one iframe and alternating the content inside it. It worked fine but I couldn't adjust the iframe's height to it's content. Some JavaScript's lines of code that I found managed to adjust the height when loading websites but not when loading Excel documents from OneDrive.

Answer 1

Try replacing on showElement

document.getElementById('J').contentWindow.location.reload();

and

document.getElementById('F').contentWindow.location.reload();

by:

document.getElementById('J').src=document.getElementById('J').src;

document.getElementById('F').src=document.getElementById('F').src;

Answer 2

It appears the problem is the "target" in your link. Firefox does the Javascript, then finds the target, now called Jun2, and goes to the link in that target. Chrome tries to find the target first, doesn't find it and assumes you mean a popup instead, does the Javascript and goes to the link.

Why are you changing the name of the frame element, anyways? Just ditch that part and keep the name of each the same.