Question

这是我在这里的第一个问题所以请耐心等待，如果我没有得到所有细节，我会道歉但我会尽量详细和具体。

我正在构建一个网站，并且希望能够单击导航栏中的链接，然后当您单击此链接时，它将href到主索引页面，同时更改iframe的源代码那个索引页面。我希望对我正在尝试做的事情有一个清晰的认识？这样做的原因是，如下所示，社区页面将具有完全不同的页面，但是站点的其余部分将直接从索引页面托管，但加载到该页面上的主iframe。这是导航（我尝试但不起作用），这可能使我想要做的更清楚

div class="navbar"><!--start nav-->
<div class="nbutton"><a onclick="location.href='index.html'" href="home.html" target="mainframe">Home</a></div>
    <div class="nbutton"><a onclick="location.href='forum.html'" href="forum/" target="forumframe">Community</a></div>
<div class="nbutton"><a onclick="location.href='index.html'" href="events.html" target="mainframe">Events</a></div>
<div class="nbutton"><a onclick="location.href='index.html'" href="sponsors.html" target="mainframe">Sponsors</a></div>
<div class="nbutton"><a onclick="location.href='index.html'" href="gallery.html" target="mainframe">Gallery</a></div>
<div class="nbutton"><a onclick="location.href='index.html'" href="streams.html" target="mainframe">Streams</a></div>

index.html网页代码上的iframe：

<iframe name="mainframe" width="700" height="600" src="images/randoms/iframetest.jpg" frameborder="1" allowFullScreen="" style="background:transparent;text-align:center;"></iframe>

论坛上的iframe页面代码：

<iframe name="forumframe" width="960" height="1200" src="forum/" frameborder="0" allowFullScreen=""></iframe>

我希望这会让我更容易看到我正在尝试用它做什么？

当我点击论坛链接以外的任何链接时iframe将无法加载但是再次加载，论坛上的iframe设置为加载“论坛/”位置，所以它实际上并不需要onclick事件，我猜它只是为了统一。

所以我想要做的总结例子：

点击“主页”会加载index.html然后将index.html上的iframe源更改为“home.html” 点击“事件”会加载index.html，然后将index.html上的iframe源更改为“events.html”

我希望这有道理吗？

非常感谢任何帮助！抱歉所有的华夫饼干，只是想尽可能多地获取信息。任何进一步的细节请问，我会尽力澄清我错过的或不清楚的。

非常感谢！

Answer 1

您可以将index.html?subpage=home.html作为主页面的网址传递，并使用JavaScript阅读subpage参数来设置框架页面。

您可以使用以下代码阅读网址参数。取自this answer：

var QueryString = function () {
  // This function is anonymous, is executed immediately and 
  // the return value is assigned to QueryString!
  var query_string = {};
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
      // If first entry with this name
    if (typeof query_string[pair[0]] === "undefined") {
      query_string[pair[0]] = pair[1];
      // If second entry with this name
    } else if (typeof query_string[pair[0]] === "string") {
      var arr = [ query_string[pair[0]], pair[1] ];
      query_string[pair[0]] = arr;
      // If third or later entry with this name
    } else {
      query_string[pair[0]].push(pair[1]);
    }
  } 
    return query_string;
} ();

然后，您可以访问QueryString.c

单击Onclick Load页面，然后在加载的页面上更改iframe源

1 个答案: