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

Question

I am using jQuery load() to load a partial page into a div. I want to pass url parameters to the partial page like so

<div id='partial'></div>
<script>
$('#partial').load('child_page.html?key=1');
</script>

How do I access these parameters from inside the child page? I tried the following in the child page, but the issue is that the window.location is not giving me child_page.html?key=1 but is giving me the root page url.

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

Answer 1

It is not possible for the "child page" to have its own DOM and scripting context, because it was simply retrieved as a string (via AJAX) and inserted into the parent page. Therefore it does not have its own window.location. Everything is added to the DOM of the parent page, and scripts are executed in the context of the parent page.

If you want to share variables between your parent page and the new script loaded with load, you can attach the variable to window and then access it in the script of the "child page".

For example:

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

// child page
var v = window.sharedVariable;

Working demo (child page)

Update:

Here is an alternate method to support multiple partials, using data attributes to share the variables.

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

Basically, we set the data we want to share in the partial's div. And then in the "child page", we find the current running script tag, then the parent tag would be the div that has the data in it.

Working demo (child page)

Answer 2

This takes a slightly different course, but achieves the result you're looking for just as well. You can use the HTML5 History API and do something like this:

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

Then from two.html, the window.location.search call will give you ?key=1 and you can parse the query string from there..

Answer 3

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

Edit, Updated

Note, original Question does not appear to include description of script element expected , to run, within returned html from call to .load()

---

Try utilizing beforeSend to set settings url at jqxhr object , access jqxhr object within .load() complete callback

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/