Question

我试图实现一些在Firefox和Safari中已经运行良好的功能，但在Chrome和IE上却很糟糕。

我试图在iframe中加载托管在OneDrive上的3个电子表格。它只显示其中一个，用户可以选择通过菜单查看哪一个。在Firefox中，它似乎运行良好，但在Chrome和IE中，用户第一次选择其他电子表格时，会打开一个新选项卡。

要显示和隐藏iframe，请使用以下代码：

<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>

当用户选择其他电子表格时，用以下内容进行选择：

<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>

为什么我使用这种方法？因为我不得不改变iframe＆＃39; name属性。

其中一个电子表格（排名＆＃34; Masculino e Misto＆＃34;）的iframe开始处于活动状态。首先，当我切换到其他iframe之一时，他们显示没有任何内容（文件未加载）。所以，我必须重新加载＆＃39; ＆＃39;的onclick＆＃39;那些iframe：

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

这就产生了一个问题，即每次打开其他电子表格时都会下载文件，从而减慢转换速度。所以我想到的只是在第一次打开电子表格时才重新加载iframe。我设法做到这一点的方法是更改iframe的name属性（它使用以前的名称重新加载，然后不再重新加载）。

我认为Firefox首先更改名称，然后加载iframe，这没关系，但在Chrome和IE中，名称只会在之后更改，从而导致新的打开标签。

任何想法如何解决这个问题？感谢

P.S.-我的第一次尝试是只有一个iframe并交替其中的内容。它工作正常，但我无法调整iframe的高度以适应它的内容。我发现一些JavaScript的代码行在加载网站时设法调整高度，但在从OneDrive加载Excel文档时却没有。

Answer 1

尝试替换showElement

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

和

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

由：

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

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

Answer 2

问题似乎是＆＃34;目标＆＃34;在你的链接中。 Firefox执行Javascript，然后找到目标，现在称为Jun2，并转到该目标中的链接。 Chrome首先尝试查找目标，找不到该目标，并假设您的意思是弹出窗口，而是使用Javascript并转到该链接。

为什么要改变框架元素的名称呢？只是放弃那部分并保持每个部分的名称相同。

多个iframe - 交替显示

2 个答案: