javascript - 更改一些 html 元素，并更改 url 而不重新加载页面

Question

我有一个很长的网站。网站的其他一些部分需要更改，而无需重置该表单。我计划使用 iframe 来加载页面的其他部分。页面上的侧边栏用作导航。我希望侧边栏中的链接能够更改 iframe 指向的 url，并更改实际的 url 栏。但不重置/重新加载任何其他 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>

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

之后的部分

Answer 1

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