多个网页中的iframe和链接

我有一个网页A.html。还有3个其他网页a1.html a2.html a3.html。 a1，a2和a3应该始终在A.html中的iframe中打开。多个网页中的iframe和链接

现在有另一个网页B.html，它有A，a1，a2和a3的链接。 A的链接不是问题，但是我如何在B中为a1 a2和a3添加链接，以便它们在A中的iframe中打开？

enter image description here

2015-01-04 Shashank Raghunath

我想你想类似这样的结构：

B----------------------- 
    A--------------------- 
    a1----------------- 
    a2----------------- 
    a3-----------------

就是说B有链接A和A具有指向a1，a2和a3。

如果是这种情况，那么只需链接a1,a2和a3到A.html。之后链接A.html至iframe,B.html。

代码可能是这样的：

B.html

<iframe src="A.html"></iframe>

A.html

<iframe src="a1.html"></iframe> 
<iframe src="a2.html"></iframe> 
<iframe src="a3.html"></iframe>

然后你可以分别有a1，a2和a3 HTML那些会有som的文件东西。

你不必把链接，a1，a2和a3在B.html因为你已经装载已经有链接到这些文件的文件A.html。

这是结构，你会用适当的宽度和高度得到：

enter image description here

如果这不是你的情况，然后解释一点在你的问题。

如果我理解正确的话，你想在B.html的链接，在打开A.htmla1，a2和a3 。例如，我点击a1，在A.html内打开a1。

这不能用纯html完成，因为您的链接位于单独的页面上。所以，不知何故，你需要告诉其他页面（在你的案例A.html）打开default,a1 ......等等。

你可以用普通的javascript来做到这一点。在你的链接B.html，你需要将信息发送到A.html什么文件打开iframe：

<a href="A.html">A</a> 
<a href="A.html#a1">a1</a> 
<a href="A.html#a2">a2</a> 
<a href="A.html#a3">a3</a>

的#a1，#a2 ...会告诉你A.html页面在iframe中打开请求的页面。

现在您需要阅读A.html上的这些散列值。当正文触发onload事件时，您可以执行此操作。

<body onload="changeSrc()"> 
<!-- Load the default page in the iframe, for instance a1.html --> 
<iframe id="abc" src="a1.html"></iframe> 
<script> 
    function changeSrc() { 
     var hash = window.location.hash; 
     var frame = document.getElementById("abc"); 

     if(hash == "#a1") { 
      frame.src = "a1.html"; 
     } 
     else if(hash == "#a2") { 
      frame.src = "a2.html"; 
     } 
     else if(hash == "#a3") { 
      frame.src = "a3.html"; 
     } 
     else { 
      // default 
      frame.src = "a1.html"; 
     } 
    } 
</script> 
</body>

这将完成任务。

因此，通过使用window.location.hash你实际上是让您在url先后通过了价值，说#a1，#a2，...并且通过该请求在if/else状态页面检查，要设置的来源框架到那个特定的页面。

希望这是你想达到的。

来源

2015-01-04 00:23:39

不，在A中只有一个iframe。a1，a2和a3必须独立打开（而不是同时打开）。并且在B中没有iframe。 –

我已经添加了一个图像。看一看。 –

我已根据您的图像更新了答案。检查我这次是否正确得到你。 –

多个网页中的iframe和链接

回答

相关问题