9

我正在使用下面的方法将远程页面加载到页面上的 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>

结果.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 会相互覆盖，还是页面会作为两个独立的实体运行？

4

3 回答 3

9

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

...浏览器通常会从文档中过滤元素，例如<html>、<title>或<head>元素。因此，通过 .load() 检索到的元素可能与浏览器直接检索到的文档不完全相同。

但是，最好在返回的 HTML 中指定要插入的元素：

$('#remoteContainer').load('www.myurl.com/results.html #containerDiv');
于 2013-03-26T21:12:17.437 回答
0

好的，所以在我问这个问题之前，也许我应该看看 DevTools。

在查看了元素检查器之后，我现在看到（至少在 Chrome 中）浏览器去掉了 HTML、HEAD 和 Body 标签。它还删除了额外的 jquery 包含。然而它确实离开了

<script>my js functions here</script>

尽管我知道我不能相信所有浏览器都会如此高效，但至少现在我已经看到了曙光。

于 2013-03-26T21:40:40.770 回答
0

我同意它“应该”“正常”工作。但是请考虑您正在创建的额外开销，可以通过仅从服务器返回您需要的内容来消除这些开销。您可能正在访问数据库以检索在您丢弃的页面部分中呈现的数据。例如，您可能会在每个页面的顶部显示有关用户的信息。或者您可能正在查找进入页面元标记的其他信息。您可能正在使用某种类型的服务器端模板来创建页面的这些多余部分。然后，您将这些多余的内容放入响应中，通过线路发送，然后要求浏览器解析它，从中创建 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();
}
于 2013-03-26T22:18:18.537 回答