Question

我正在使用下面的方法将远程页面加载到页面上的div中。

$('#result').load('www.myurl.com/results.html');

我很好奇，在另一个页面中加载完全格式化的HTML页面是不好的做法？我担心的是更多的是加载css或其他可能覆盖主页上其他元素的javascript包含。

我在初次测试期间没有遇到任何问题，我只是不确定这是否是最佳做法。

澄清：如果我有这样的主页

<html>
    <head>
       <script src="jquery.js"></script>
       <link href="mycss.css" rel="stylesheet" type="text/css">
    </head>
    <body>
       <div id="remoteContainer"></div>
       <script>
          $('#remoteContainer').load('www.myurl.com/results.html');
       </script>
    </body>

和results.html代码看起来像这样：

<html>
    <head>
       <script src="jquery.js"></script>
       <link href="myResults.css" rel="stylesheet" type="text/css">
    </head>
    <body>
       <header>        
           <h1>My Results Page</h1>
       </header>
       ...
    </body>

CSS和JS会相互覆盖，还是页面会作为2个独立的实体运行？

Answer 1

这将正常工作，浏览器将正确处理它。来自jQuery docs：

...浏览器经常过滤文档中的元素例如<html>，<title>或<head>元素。结果，元素由.load（）检索可能与文档不完全相同由浏览器直接检索。

但是，在返回的HTML中指定要插入的元素可能是更好的做法：

$('#remoteContainer').load('www.myurl.com/results.html #containerDiv');

Answer 2

好的，也许我应该在我提出问题之前先看看DevTools。

在查看Element Inspector之后，我现在看到（至少在Chrome中）浏览器剥离了HTML，HEAD和Body标签。它还删除了额外的jquery包含。但它确实离开了

<script>my js functions here</script>

虽然我明白我不相信所有浏览器都会如此高效，但至少现在我已经看到了它。

Answer 3

我同意它'应该'工作'很好'。但是考虑一下您正在创建的额外开销，可以通过仅返回服务器所需的内容来消除这些开销。您可能正在访问数据库以检索在您要丢弃的页面部分中呈现的数据。例如，您可能在每个页面的顶部显示有关用户的信息。或者您可能正在查找进入页面元标记的其他信息。您可能正在使用某种类型的服务器端模板来创建页面的这些多余部分。然后你将这些多余的内容放在一个响应中，通过网络发送，然后要求浏览器解析它，从中创建html元素，然后删除不需要的部分。

这可能不是什么大问题。这取决于你获得了多少流量，服务器为渲染整个页面所做的额外工作量，服务器所承受的负载量，以及你需要多少时间/金钱/人力以及需要多少工作量能够发送修剪后的响应。如果这是一个小型项目，交通量很小，可能不值得改变。但它也可能是一个容易改变。而且由于问题是关于最佳实践，我会说不，加载整页以仅呈现页面的一部分而不是最佳实践。最佳做法是从服务器返回您需要的内容，并使用它来更新页面。这可以是预呈现的HTML，也可以是JSON，但这是另一个讨论。

PHP中的一个简单的解决方案可以简单如下，在查询字符串中使用？format = ajax：

<?php
$ajax = $_GET['format'] == 'ajax';

if (!$ajax) {
    render_head_and_stuff();
}

render_results();

if (!$ajax) {
    render_footer_and_stuff();
}

通过Ajax将页面加载到Div Best Practice？

3 个答案: