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

Question

我正在使用 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>

Answer 1

How to access URL parameters sent to div via jQuery load()

编辑、更新

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

尝试利用 beforeSend 在 jqxhr 对象上设置 settings url，在 .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/

Answer 2

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

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

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

Answer 3

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

如果您想在父页面和用 load 加载的新脚本之间共享变量，您可以将变量附加到 window，然后在 [=35] 的脚本中访问它=].

例如：

// 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 中设置了我们要共享的数据。然后在 "child page" 中，我们找到当前的运行脚本标签，那么父标签就是包含数据的 div。

Working demo (child page)

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

How to access URL parameters sent to div via jQuery load()

javascript

parameters

jquery