用通过AJAX获取的内容替换HTML页面。

8 浏览
0 Comments

用通过AJAX获取的内容替换HTML页面。

我有一个典型结构的HTML页面：


  
   
   
  
  
   content

你认为这是可能的吗？我已经尝试给html标签一个id，然后使用`$(id).replace(data);`，但没有成功。

别问我为什么，但这就是我需要的（我正在使用一个特殊的“混搭构建器”网站...这是一个漫长的故事）。

编辑：我忘了说要执行接收到的内容中的脚本，包括使用``包含的外部脚本。

0

3 答案

0 Comments

解决方法之一是使用AJAX来替换HTML页面的内容。通过AJAX，可以从服务器异步获取数据，然后用这些数据替换原有的HTML页面内容，而不需要刷新整个页面。

这个问题的出现原因是在使用原生的JavaScript方法document.getElementById(id).innerHTML=data时，当页面内容被替换时会导致屏幕闪烁，尤其是在有黑色背景的情况下更为明显。

为了解决这个问题，可以使用一些流行的JavaScript库，如Prototype和jQuery。在Prototype中，可以使用$(id).update(data)来替换页面内容；在jQuery中，可以使用$('#id').replaceWith(data)来实现替换。这些库在替换页面内容时会自动评估脚本，避免了页面闪烁的问题。

总结起来，通过使用AJAX来替换HTML页面的内容，可以避免页面刷新和闪烁的问题，提供更好的用户体验。

0
0 Comments

问题：如何用通过AJAX检索到的内容替换HTML页面？

原因：使用document.write()方法可以替换整个文档，而不仅仅是body标签的内容。然而，这种方法在Internet Explorer中无法工作，会引发“Access Denied”错误。在某些浏览器（如Chrome）中，它只会追加内容而不是替换整个文档。此外，使用document.write()方法会导致浏览器历史记录无法更新，点击返回按钮时，不会返回到重定向前的页面。

解决方法：可以使用history API来解决浏览器历史记录的更新问题。另外，可以使用document.open()、document.write()和document.close()方法来替换整个文档的内容。然而，需要注意的是，这种方法会导致页面闪烁，并且Firefox的MDN不建议使用它。另一种替代方法是使用innerHTML属性，但它不能执行JavaScript代码。

代码示例：

document.open();
document.write(newContent);
document.close();

注意：使用这些方法时，要注意浏览器的兼容性。在2019年以后的版本中，这些方法在最新的Chrome和IE中可以正常工作。

最后，根据具体情况选择合适的方法来替换HTML页面的内容。

0
0 Comments

问题：Replace HTML page with contents retrieved via AJAX

原因：使用AJAX替换HTML页面的原因是为了实现动态更新页面内容，提升用户体验。

解决方法：可以使用jQuery的load方法来实现HTML页面的替换。使用该方法可以通过AJAX异步请求获取指定URL的内容，并将其替换当前页面的指定元素。

代码示例：

$('body').load(url, [data], [callback]);

更多详细信息请参考[jQuery官方文档](http://docs.jquery.com/Ajax/load#urldatacallback)。

0