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

9 浏览
0 Comments

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

我使用jQuery的load()方法将部分页面加载到一个div中。我想要传递url参数给部分页面，代码如下：

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

0

3 答案

0 Comments

问题的出现原因是，由于"子页面"只是通过AJAX作为字符串插入到父页面中，并没有自己的DOM和脚本上下文，因此它没有自己的window.location。所有内容都添加到父页面的DOM中，并且脚本在父页面的上下文中执行。

解决方法是，如果要在父页面和使用load加载的新脚本之间共享变量，可以将变量附加到window对象上，然后在"子页面"的脚本中访问它。

例如：

// 父页面
window.sharedVariable = "Hello World!";
$('#partial').load(url);
// 子页面
var v = window.sharedVariable;

[工作示例](http://jsfiddle.net/alan0xd7/L9kumjmo/) ([子页面](https://gist.githubusercontent.com/alan0xd7/ed60a93559c60d6bfdaa/raw/51dd18a0069003674864142c50806722fd9f6ae5/abc.html))

更新：

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

// 父页面
$('#partial_1').load(url).data("param", "111");
$('#partial_2').load(url).data("param", "222");
$('#partial_3').load(url).data("param", "333");
// 子页面
var scriptTag = document.scripts[document.scripts.length - 1];
var parentTag = scriptTag.parentNode;
var param = $(parentTag).data("param");

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

[工作示例](http://jsfiddle.net/alan0xd7/L9kumjmo/4/) ([子页面](https://gist.githubusercontent.com/alan0xd7/ed60a93559c60d6bfdaa/raw/a728e6d54af0063909258548ccfeed20cac9480d/abc.html))

这个答案似乎没有解决原帖中描述的"URL参数"问题？

直接的答案是，"无法实现"，因为没有"子页面"，它们都只是同一个页面的一部分。

在应用程序的其他区域中使用了您建议的方法，其中页面之间要共享的数据是静态的并且预先知道的。但在这种情况下，部分div的数量只在运行时才会知道：parent_page.html有以下js

child_page.html需要加载到parent_page.html中的多个div中。在child_page.html中，想要通过load发送的键值对访问键值。

是的。解决方案应该在load的complete回调中返回传递给.load()的参数。如果传递给.load()的参数发生了更改，那么在每次调用.load()时应该可以访问这些更改后的参数。

我提供了一种支持多个部分页面的替代方法，请参考一下。

使用数据对象传输参数的解决方案对我很有效。谢谢。

谢谢。这个解决方案对我有效。

0
0 Comments

问题出现的原因是想要通过jQuery的load()方法访问通过URL参数传递给div的内容。使用load()方法加载页面时，无法直接获取URL参数。

解决方法是使用HTML5的History API，通过替换URL的方式将参数添加到URL中，然后在加载的页面中通过window.location.search获取参数，并解析查询字符串。

具体实现代码如下：

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

然后在two.html页面中，可以通过window.location.search获取到?key=1这个参数，并进行解析。

这种方法简单且不需要对加载的页面进行任何代码编辑，因此是解决这个问题的最佳方法。

0
0 Comments

问题的出现的原因是需要在通过jQuery的load()方法加载的div中访问URL参数。解决方法是使用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);

在上述代码中，通过beforeSend设置了jqxhr对象的params属性，然后在loadComplete回调函数中通过jqxhr对象访问了URL参数。

同时，上述代码中还包含了一个示例的HTML代码，其中有三个div标签（id为partial_1、partial_2和partial_3），分别通过.load()方法加载了同一个URL的内容，并在加载完成后调用了loadComplete回调函数。

通过上述方法，可以在通过.load()方法加载的div中访问URL参数。

0