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

Posted 2023-03-10

【中文标题】如何访问通过 jQuery load() 发送到 div 的 URL 参数

【英文标题】：How to access URL parameters sent to div via jQuery load()

【发布时间】：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() 相同

【参考方案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)。这应该是最佳答案。