Load in Javascript from another webpage

I’ll avoid the backstory of why this needs to be the case, so just assume it needs to be set up this way.

I have a page that has a <ul><li> list. Inside each list item, there is an anchor that takes you to a page.

In Javascript, I return false; upon clicking that anchor, and .load() part of that page into a lightbox as part of campus map functionality.

Inside of each .load()'d page, there is an embed that contains <script> that has some variables I need to access. I’m trying to see if I can somehow .load() that page. But with .load(), it overwrites whatever element you are loading it into. Is there a way to grab that <script> in the .load()'d page without overwriting the current pages content? Does that make sense?

No, not really.

You don’t know know which part of the scripts in the page related to the element you’re trying to load. You’re best to identify which scripts are in use and add them into your site before loading the remote content.

1 Like

Ok, thank you. One more question, and apparently this is a huge issue from googling. It looks like <script> tags are stripped during .load(). I’m having issues finding a thread on google that allows me to access the variables inside of the .load()'d <script> tags. Seems the variables are always undefined (makes sense since the script tags are stripped). Has anyone run into this issue? I saw some .eval() stuff, but I wasn’t sure if that’s what people are doing (those threads were from 2009-2011).

Edit - http://stackoverflow.com/questions/5952123/jquery-load-with-script-tags

Looks like it’s supposed to run the scripts but … I’m getting undefined errors.

main.js?1472496586:93 Uncaught ReferenceError: xCoor is not defined
$('.map-coordinates').load( anchorHref + ' .fsEmbed', function() {
          console.log(xCoor);
        });

The .loaded page is below…

<section class="fsElement fsEmbed" id="fsEl_3720">

			<header>
			<h2 class="fsElementTitle">Map Location</h2>
	</header>
<div class="fsElementContent">
        <script type="text/javascript">
  var xCoor = 0;
  var yCoor = 10;
</script>
<p>sup</p>

</div>


</section>

(Note that during runtime, <script> isn’t there in the inspector toolbar output).

Looks like it’s supposed to run the scripts but … I’m getting undefined errors.

jQuery Load Documentation

Script Execution
When calling .load() using a URL without a suffixed selector expression, the content is passed to .html() prior to scripts being removed. This executes the script blocks before they are discarded. If .load() is called with a selector expression appended to the URL, however, the scripts are stripped out prior to the DOM being updated, and thus are not executed.

If it does run because of some bug, it wouldn’t be wise to rely on a bug for your code to work. That’s why there are still some business apps that only work in IE.

Hmm, so in terms of this, it sounds like I’m SOL? No way to do this?

The only thing that I can think of that might work is to put together and distribute a browser extension.

Because Firefox has made things more secure things are different from when I last did any similar work.

I imagine there might be a way to have a Chrome extension with something like it but I haven’t looked into it.

It involves aptly named “unsafeWindow”

https://developer.mozilla.org/en-US/Add-ons/SDK/Guides/Content_Scripts/Interacting_with_page_scripts

https://developer.mozilla.org/en-US/Add-ons/SDK/Guides/Content_Scripts

https://blog.mozilla.org/addons/2014/04/10/changes-to-unsafewindow-for-the-add-on-sdk/

Eh, this resource I’m making needs will need to work globally so any sort of browser extension for this is out the window, sorry :frowning: .

What a shame. I guess I’ll just make this HTML instead and create data attributes instead of Javascript variables. Thanks guys.

Actually, would vanilla Javascript strip out the <script>? Because from what I was reading, Jquery is what strips out the tags, not Javascript in general / the browser.

I can’t see how it would do that unless that’s what you wrote it to do. I’d be curious to trace the jQuery function that does that, back to its underlying vanilla JS, and see what’s going on, just not today. Right, back to the packing…

From what I was reading, it’s purposefully made that way as “a feature” although many users consider it a bug.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.