Question

我的网站形式很长。网站还有一些其他部分需要更改而不重置该表单。我打算使用iframe加载页面的其他部分。页面上的侧边栏用作导航。我希望侧边栏中的链接更改iframe指向的网址，并更改实际的网址栏。但不能重置/重新加载任何其他iframe。

由于

P.S：我是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>

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

之后的部分

Answer 1

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

这个答案可以让你知道你的反对意见：Modify the URL without reloading the page

Answer 2

我认为你应该使用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>

Answer 3

这是一个简单的解决方案，它使用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>

更改一些html元素，并在不重新加载页面的情况下更改URL

3 个答案: