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>

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>

• javascript
• jquery
• parameters

• "//code to parse the url to extract the parameters goes here" .load() not appear to change window.location ? – guest271314 Commented Jul 12, 2015 at 15:09
• "child page" is not really a page, it is just content being added into the current page. Please refer to my new answer for details. – alan0xd7 Commented Jul 12, 2015 at 16:06
• @alan0xd7 ""child page" is not really a page, it is just content being added into the current page. Please refer to my new answer for details." Yes , though that does not appear to be actual Question at original post "How to access URL parameters sent to div via jQuery load()" ? That is, how to access "parameters" passed .load() ? "from inside the child page?" would be same html page .load() called from – guest271314 Commented Jul 12, 2015 at 17:12

3 Answers 3

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)

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..

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() plete callback

var url = "https://gist.githubusercontent./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./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/L9kumjmo/5/