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

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

如果要在父页面和加载load的新脚本之间共享变量，可以将变量附加到window，然后在＆＃34; child的脚本中访问它页面＆＃34;

例如：

// 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中共享的数据。然后在＆＃34;子页面＆＃34;中，我们找到当前运行的脚本标记，然后父标记将是包含数据的div。

Working demo（child page）

Answer 2

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

修改，更新

请注意，原始问题似乎不包括预期的script元素的说明，在退回的html内从.load()调用

尝试利用beforeSend在settings对象设置url jqxhr，访问jqxhr .load()回调中的complete对象< / p>

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 3

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

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

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

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

3 个答案: