Question

如何仅在resize事件上重新加载整个页面或<body>并执行所有脚本。

我更喜欢重新加载身体的情况，我已经在头部和身体的末端都有了所有重型插件我已经functions.js在那里我做了所有的工作。

我试过了：

var url = document.URL;
$('html').load(url);

但是脚本没有在新DOM上执行。

Answer 1

老实说，不要失去范围，你可以更好地创建持有人。否则你的ajax调用将不会非常有用。像下面这样做

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ajax preview</title>
</head>

<body>
    <div id="siteHolder"></div>
</body>
</html>

然后使用您用来将新页面插入到ID为#siteHolder的div中的jQuery插件，这样看起来会是这样的：

var request = $.ajax({
  url: "example.html",
  dataType: "html"
});

request.done(function(data) {
  $("#siteHolder").html( data );
});

request.fail(function(jqXHR, textStatus) {
  alert( "Request failed: " + textStatus );
});

这样你只会启动你的css和js库一次，并且可以更好地控制你的文档。

Answer 2

要在窗口调整大小上重新加载页面，您可以执行以下操作：

window.onresize = function(event) {
  window.location.reload();
};

但我认为你真正需要的是创建一个响应式页面。响应式页面将根据窗口大小进行调整，如果调整窗口大小，它将自动调整元素而不重新加载页面。

CSS示例：

/* Example for Smartphones */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Your Styles */
}

/* Example for  Desktops and laptops */
@media only screen 
and (min-width : 1224px) {
/* Your Styles */
}

完整示例here

我建议你搜索媒体查询和响应式设计，你会发现很多例子。

jQuery ajax重新加载正文并执行脚本

2 个答案: