1

我有一个很长的网站。该网站的其他一些部分需要在不重置该表单的情况下进行更改。我打算使用 iframe 来加载页面的其他部分。页面上的侧边栏用作导航。我希望侧边栏中的链接更改 iframe 指向的 url，并更改实际的 url 栏。但不重置/重新加载任何其他 iframe。

谢谢

PS：我是 JavaScript 的新手，所以完整的例子会有所帮助。

这是我的一些代码：

<div class="sidebar">
<input type="text" placeholder="search for accounts" id="search" />
<ul id=sidebar-list>
  <li class=list>
    <a onclick="edit-iframe-1" id="username">This will change iframe 1 to point to a user</a>
    <a onclick="edit-iframe-2" id="username">This will change iframe 2 to point to a user</a>
  </li>
  <li class=list>
    <a onclick="edit-iframe-1" id="username">This will change iframe 1 to have a different user</a>
    <a onclick="edit-iframe-2" id="username">This will change iframe 2 to have a different user</a>
  </li>
</ul>
</div>
<div id=iframediv1>
  <iframe id=iframe1 src="/path/file?user=username"></iframe>
</div>
<div id=iframediv2>
  <iframe id=iframe2 src="/path/differentfile?user=username"></iframe>
</div>

这个想法是侧边栏中的列表包含所有不同的用户名，无论您单击哪个用户名，它都会加载相应的页面。url中唯一需要更改的部分是之后的部分?user=

4

3 回答 3

0

您可以尝试使用 history.pushState。不幸的是，浏览器支持将仅限于较新的版本。

这个答案应该让您了解您所面临的问题：修改 URL 而无需重新加载页面

于 2013-01-28T04:48:04.173 回答
0

我认为你应该使用 javascript 来达到你的目的。我认为这可能是一个解决方案。

 <SCRIPT LANGUAGE="JavaScript">
    function newLocation1(nwloc){
        document.getElementById('iframe1').src = "/path/file?user="+nwloc;
    }
    function newLocation2(nwloc){
        document.getElementById('iframe2').src = "/path/differentfile?user="+nwloc;
    }
    </script>


    <div class="sidebar">
    <input type="text" placeholder="search for accounts" id="search" />
    <ul id=sidebar-list>
      <li class=list>
        <a onclick="javascript:newLocation1('username1')" >This will change iframe 1 to point to a user</a>
        <a onclick="javascript:newLocation2('username1')" >This will change iframe 2 to point to a user</a>
      </li>
      <li class=list>
        <a onclick="javascript:newLocation1('username2')" >This will change iframe 1 to have a different user</a>
        <a onclick="javascript:newLocation2('username2')" >This will change iframe 2 to have a different user</a>
      </li>
    </ul>
    </div>
    <div id=iframediv1>
      <iframe id="iframe1" src="/path/file?user=username1"></iframe>
    </div>
    <div id=iframediv2>
      <iframe id="iframe2" src="/path/differentfile?user=username1"></iframe>

</div>
于 2013-01-28T05:09:57.487 回答
0

这是一个简单的解决方案，它使用 jQuery 从单击的链接中提取 href 并将其插入到目标 iframe 的 src 属性中。

<div class="sidebar">
<input type="text" placeholder="search for accounts" id="search" />
<ul id="sidebar-list">
  <li class="list">
    <a href="/path/file?user=mike" data-target="iframe1">Mike - Frame 1</a>
    <a href="/path/differentfile?user=mike" data-target="iframe2">Mike - Frame 2</a>
  </li>
  <li class=list>
    <a href="/path/file?user=joe" data-target="iframe1">Joe - Frame 1</a>
    <a href="/path/differentfile?user=joe" data-target="iframe2">Joe - Frame 2</a>
  </li>
</ul>
</div>
<div id=iframediv1>
  <iframe id=iframe1 src="/path/file?user=username"></iframe>
</div>
<div id=iframediv2>
  <iframe id=iframe2 src="/path/differentfile?user=username"></iframe>
</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript">
    $(document).ready(function()
    {
        $(".sidebar a").click(function(event) {
            event.preventDefault();

            var targetID = $(this).attr("data-target");
            $("#" + targetID).attr("src", $(this).attr("href"));
        });
    });
</script>
于 2013-01-28T05:14:14.240 回答