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

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

  $('#partial').load('child_page.html?key=1');  

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

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

Answer 1

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

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

例如：

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

工作演示 （ 儿童页面 ）

更新：

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

 // 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"); 

基本上，我们设置我们想要在partial的div中共享的数据。 然后在“子页面”中，我们找到当前运行的脚本标记，然后父标记将是包含数据的div。

工作演示 （ 儿童页面 ）

Answer 2

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

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

然后从two.html，window.location.search调用将给你？key = 1，你可以从那里解析查询字符串..

Answer 3

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

编辑，更新

注意，原始问题似乎不包括预期的script元素的描述，在调用返回的html运行.load()

---

尝试利用jqxhr在jqxhr对象上设置settings url ，访问jqxhr .load() jqxhr对象complete回调

 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);