javascript - 刷新无需重新加载

Question

很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它， visit the help center 。

已关闭 11 年前。

我有这个 div i，我用 javascript 添加了更多 div。

但是，每次我使用 javascript 添加新的 div 时，它都会刷新，因此例如这些 div 中的 YouTube 视频将会停止。

我可以将这些div放入div中而不重新加载它吗？

Answer 1

清爽？您是否使用“提交”类型的按钮(以表单形式，感谢 RobG)或添加 DIV 的链接？如果是这样，您可以在调用附加 DIV 的函数中返回 false。

HTML

<button onclick="return foo()">The Button</button>

Javascript

function foo(){
  /*all the work*/
  return false; //No matter what, return false so you don't get a page reload.
}

编辑:看起来您正在使用链接。我们可以通过以下几种方法来解决这个问题:

更改 href

您可以将 href 更改为“#”(在 HTML 中称为 anchor )。

<a href="#">Foo</a>

当您单击它时，这不会将您带到不同的页面，但有两个注意事项:

1. 始终滚动到页面顶部或您指定的任何部分(例如，#foo 将滚动到 ID 或名称为“foo”的元素。这可能会让用户感到烦恼。
2. 对非 JavaScript 用户破坏我们的页面。如果您希望该链接重定向到另一个页面，非 Javascript 用户将始终停留在该页面上。

更多信息:W3C Page on Links (and anchors)

使用 onclick 属性返回 false

在 Javascript 函数中返回 false 将阻止链接转到其原始目的地。这也适用于表单。

您可以在 <a> 中指定操作标签的声明，例如

<a href="foo.html" onclick="foo(); return false;">Foo</a> 
<!---The above "onclick" could also just be a function that always returns false-->

此方法会维护我们希望为非 JavaScript 用户保留的任何链接，并且不会移动页面的位置。然而，这种方法也有一些缺陷:

1. 我们的 HTML 和 javascript 是交织在一起的。这不是世界上最大的问题，但它使我们的代码更新起来更加麻烦，因为如果我们有多个元素要附加此事件，那么我们必须为每个元素更新它。这可能意味着要编辑 HTML 文档中的很多行。如果我们将 HTML 和 JavaScript 分开，我们就可以保持它更加 DRY(不要重复)。
2. 即使我们的 JavaScript 代码加载到外部文件中并缓存，我们每次都必须在浏览器中读取它。同样，根据 HTML 页面的大小，这可能不是一个大问题。

使用 JavaScript 绑定(bind)事件

一些 Javascript 行话术语:

1. 事件 - 用户浏览网页时发生的事情。这可以是单击、鼠标移动、窗口大小调整等。
2. 事件处理程序 - 响应事件发生的函数。

使用 Javascript 将事件绑定(bind)到 HTML 元素的方法有很多，但为了简单起见，我将保持简短。

<a href="foo.html" id="foo">Foo</a>

在这里，我们更改了 a 标签:

1. 删除 onclick 标记。
2. 添加 ID，使该元素能够轻松与我们可能在页面上使用的任何其他链接(以及与此相关的任何其他元素)区分开来。

让我们使用 JavaScript 将事件处理程序绑定(bind)到我们的链接:

function foo(){
 /* stuff we want to do to our div */
 return false; /* prevent page refresh */
}
function addEventToLink(){
  /* Set up a variable that we can use JavaScript to change attributes and event listeners*/
  var theLink = document.getElementById('foo'); 
  /* Set up our link to call the method 'foo', but ONLY when it is clicked on.
  * element.onclick changes the "onclick" attribute of the element */
  theLink.onclick = foo;  
}
addEventToLink(); //finally, call the method so our event listener is added to our link

请注意使用element.onclick您只能每个元素设置一个事件处理程序。这基于 DOM Level 0 事件规范。如果您想为每个元素添加多个事件处理程序，请查看 Internet Explorer 和更多符合标准的浏览器(例如 Firefox 和 Chrome)的功能分割:Wikipedia.

实例:http://jsfiddle.net/77CLR/6/