如何访问通过 jQuery load() 发送到 div 的 URL 参数答案

【问题标题】：How to access URL parameters sent to div via jQuery load()如何访问通过 jQuery load() 发送到 div 的 URL 参数
【发布时间】：2015-09-30 20:40:14
【问题描述】：

我正在使用 jQuery load() 将部分页面加载到 div 中。我想像这样将url参数传递给部分页面

<div id='partial'></div>
<script>
$('#partial').load('child_page.html?key=1');
</script>

如何从子页面内部访问这些参数？我在子页面中尝试了以下操作，但问题是 window.location 没有给我 child_page.html?key=1 而是给了我根页面 url。

<script>
var url = window.location;
//code to parse the url to extract the parameters goes here
</script>

【问题讨论】：

"//解析url提取参数的代码放到这里" .load()好像没变window.location?
“子页面”并不是真正的页面，它只是添加到当前页面的内容。详情请参考我的新答案。
@alan0xd7 ""子页面" 并不是真正的页面，它只是添加到当前页面的内容。详情请参阅我的新答案。" 是，虽然这似乎不是原始帖子中的实际问题 "How to access URL parameters sent to div via jQuery load()" ？也就是说，如何访问通过.load() 的“参数”？ “从子页面内部？” 将与调用的 html 页面 .load() 相同

标签： javascript jquery parameters

【解决方案1】：

如何访问通过 jQuery load() 发送到 div 的 URL 参数

编辑、更新

请注意，原始问题似乎不包括对 script 元素的描述，该元素应在从调用 .load() 返回的 html 内运行

尝试利用beforeSend将settingsurl设置为jqxhr对象，在.load()complete回调中访问jqxhr对象

var url = "https://gist.githubusercontent.com/anonymous/4e9213856be834b88f90/raw/1d90ab5df79e6ee081db2ff8b94806ef27cbd422/abc.html";

$.ajaxSetup({
  beforeSend: function(jqxhr, settings) {
    jqxhr.params = settings.url
  }
});

function loadComplete(data, textStatus, jqxhr) {
    $(this).find("h1")
    .html(function(_, html) {
      return html + " My param is " + jqxhr.params.split("?")[1]
    });
};

$("#partial_1").load(url + "?111", loadComplete);

$("#partial_2").load(url + "?222", loadComplete);

$("#partial_3").load(url).load(url + "?333", loadComplete);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">

</script>
<div id="partial_1"></div>
<div id="partial_2"></div>
<div id="partial_3"></div>

jsfiddle http://jsfiddle.net/L9kumjmo/5/

【讨论】：

请问，您为什么要这样做？如果您要请求该页面，您已经事先知道 URL（及其参数），您不能直接保存吗？
@alan0xd7 如果url，参数未知？，但创建，动态传递给.load()？
即使你动态创建参数，在你调用load(url)的那一刻仍然是已知的，因为它是url的一部分。
@alan0xd7 如何知道异步.load() 何时完成访问传递的参数？定义、附加属性到 jqxhr 对象有什么问题？
当你调用load()时，你给了它一个url，对吗？所以在那个网址里，你已经有了参数，不是吗？

【解决方案2】：

“子页面”不可能有自己的 DOM 和脚本上下文，因为它只是作为字符串检索（通过 AJAX）并插入到父页面中。因此它没有自己的window.location。一切都添加到父页面的 DOM 中，脚本在父页面的上下文中执行。

如果你想在你的父页面和用load加载的新脚本之间共享变量，你可以将变量附加到window，然后在“子页面”的脚本中访问它。

例如：

// parent page
window.sharedVariable = "Hello World!";
$('#partial').load(url);

// child page
var v = window.sharedVariable;

Working demo (child page)

更新：

这是支持多个部分的替代方法，使用数据属性来共享变量。

// parent page
$('#partial_1').load(url).data("param", "111");
$('#partial_2').load(url).data("param", "222");
$('#partial_3').load(url).data("param", "333");

// child page
var scriptTag = document.scripts[document.scripts.length - 1];
var parentTag = scriptTag.parentNode;
var param = $(parentTag).data("param");

基本上，我们将要共享的数据设置在部分的 div 中。然后在“子页面”中找到当前运行的脚本标签，父标签就是里面有数据的div。

Working demo (child page)

【讨论】：

这个答案似乎没有解决原始帖子中描述的“URL参数”？
直接回答是“做不到”，因为没有“子页面”，都是同一个页面的一部分。
@alan0xd7 在应用程序的其他区域中使用了您建议的方法，其中页面之间共享的数据是静态的并且是预先知道的。但在这种情况下，部分 div 的数量只有在运行时才能知道： parent_page.html 具有以下 js

child_page.html 需要加载到 parent_page.html 中的多个 div 中。在 child_page.html 内部想要访问通过加载发送给它的键值。
是的。解决方案应该在 .load() complete 回调中返回传递给 .load() 的参数。如果传递给 .load() 的参数发生了变化，那么在每次调用 .load() 时应该可以访问这些变化的参数
我提供了一个替代方法，支持多个partials，请看一下。

【解决方案3】：

这需要稍微不同的过程，但同样可以达到您正在寻找的结果。您可以使用 HTML5 History API 并执行以下操作：

history.replaceState(null, null, '?key=1');
var test = $('#partial').load('two.html');

然后从 two.html，window.location.search 调用将为您提供 ?key=1 并且您可以从那里解析查询字符串..

【讨论】：

漂亮而简单。还允许在没有任何代码编辑的情况下加载第二个页面 (two.html)。这应该是最佳答案。