将新的iframe加载到javascript collapse中而不进行切换

Question

我有两个链接，每个链接应该分别将不同的HTML文件加载到iframe中。它们将被加载到相同的javascript折叠区域中。我希望每个链接在单击时将指定的文件加载到iframe中。

我的问题是，如果一个html文件加载到打开(显示(的折叠区域，如果我点击第二个链接，折叠区域将切换为关闭。我想我需要一个if/then js脚本，但不确定正确的逻辑和语法？

它应按预期逻辑运行：1( 如果折叠区域是关闭的(默认情况下是关闭的(，当单击任何链接时，它都应该打开，然后加载到iframe内容(HTML文件(中2( 如果我在折叠打开时单击第二个链接，它应该保持打开(而不是切换关闭(，并简单地加载到第二个iframe内容(HTML文件(

我下面的内容可以很好地"加载"正确的内容，但默认情况下会切换。因此，如果我打开了加载了内容的区域，如果我单击第二个链接，它就会关闭。

以下是我的片段：

<a href="#" onClick='document.getElementById("process_frame").src="html_file_1.php";' data-toggle="collapse" data-target="#content">LINK 1</a>
<a href="#" onClick='document.getElementById("process_frame").src="html_file_2.php";' data-toggle="collapse" data-target="#content">LINK 2</a>
<div id="content" class="collapse">
<p><iframe id="process_frame" overflow="hidden" scrolling="no" frameborder="0" height="280" width="100%"></iframe></p>
</div>

任何建议或样品都会很有帮助。。。谢谢

Answer 1

我将使用网站来演示您的问题的解决方案。该片段不显示结果，但您可以在此处查看fiddle。这里有第二个解决方案(如第二个片段所示(；它特定于您的两个文件。您可能需要添加一个路径。这些都是相当原始的解决方案，但由于您只在两个文件之间切换，因此这可能足以满足您的需求。

(我为div(而不是iframe(设置了背景颜色。。如果您愿意，请删除它。(

function togglediv(filename) {
var frme = document.getElementById("process_frame");
var file2 = filename;
if (file2 == " " || filename == undefined) {
frme.src = "http://www.richmondinnireland.com";
file2 = frme.src;
} else {
frme.src = filename;
file2 = frme.src;
}
//console.log(file2)
// display frame is hidden 
if (frme.style.display == 'none') {
frme.style.display = 'block';
frme.src = file2;
}
}

#content {
background-color: lightgrey;
height: 280px;
overflow: auto;
}
#process_frame {
height: 280px;
overflow: auto;
width: 100%;
z-index: 0;
}

<a href="#" id="link1" onClick='togglediv("http://www.hilaryshomeopathy.wordpress.com");' data-toggle="collapse" data-target="#content">LINK 1</a>
<a href="#" id="link2" onClick='togglediv();' data-toggle="collapse" data-target="#content">LINK 2</a>
<br><br>
<div id="content" class="collapse">
<iframe id="process_frame" overflow="hidden" scrolling="no" frameborder="0" height="280" width="100%"></iframe>
</div>
<script>
</script>

#process_frame {
height: 280px;
overflow: auto;
width:100%;
}
#file1,
#file2 {
display: inline-block;
margin: 5px;
}

<a href="#" id="file1" onClick='togglediv("1");' data-toggle="collapse" data-target="#content">File 1</a>
<a href="#" id="file2" onClick='togglediv("2");' data-toggle="collapse" data-target="#content">File 2</a>
<div id="content" class="collapse">
<iframe id="process_frame" overflow="hidden" scrolling="no" frameborder="0" height="280" width="100%"></iframe>
</div>
<script>
function togglediv(num) {
var frme = document.getElementById("process_frame");
var fileid = num;
var filename = "html_file_";
var filetoget = '"' + filename + num + ".php" + '"';
console.log(filetoget);
// check if frame is hidden 
if (frme.style.display == 'none') {
frme.style.display = 'block';
frme.src = getfile;
} /*else {
//frme.style.display = 'none';
}*/
}
</script>