jQuery open external url and manipulate DOM

Question

I am attempting to open an external url (outside of our network) and show a hidden div (for video playback).

My HTML code:

<div id="myDiv">
    <input type="button" id="myButton" value="Watch Career Video"></input>
</div>

My JS code:

$(document).ready(function() {

     $("#myDiv").on('click', '#myButton', function() {

         //re-direct to career video url
         window.location.href = "https://www.mynextmove.org/profile/summary/13-2021.02";

        //show video div area ** THIS DOES NOT WORK ?? **
        $('#careervid-wrapper').show();

    });

});

Specifically, how can I get 'careervid-wrapper' to show? Do I need to use AJAX? Cross Domain Policy workarounds? Abandon ship?

URL can be opened in a new tab or window, it does not matter.
I couldn't get the ajax success to work when I tried using AJAX.

You can see the JSFiddle here: https://jsfiddle.net/aussiejoe/njhsxmq7/

_"Abandon ship?"_ - unless the other site is explicitly willing to cooperate: Yes. Because the Same Origin Policy prevents you from accessing content from a different origin in any new tab/window/frame, and without the other site enabling CORS you can not use AJAX to get the content either. — CBroe, Jan 20 '17 at 22:03
@CBroe it is possible that they would add us to their CORS policy. It's a longshot but it is a possibility. — AussieJoe, Jan 20 '17 at 22:05
Assuming the site in the code is real, https://www.mynextmove.org/help/about/ says, _"The careers listed here, along with occupational information except as listed below, come from the 21.1 release of the [O*NET Database](https://www.onetcenter.org/database.html)."_ A little more clicking around leads to [O*NET® Web Services](https://www.onetcenter.org/dev_web.html) - maybe you can get the data you need that way, with the added benefit of it likely being suitably structured, so that you don't have to parse it out of source code. Plus, seems free of charge too. — CBroe, Jan 20 '17 at 22:08
@CBroe yes, we have a paid subscription for that access. The idea was hopefully to avoid writing any code, and simply hotlinking to the page directly. I don't think it will be a problem to get them to add us to their CORS policy but I can't say that for sure at the moment. — AussieJoe, Jan 20 '17 at 22:12
I'm assuming that you're trying to access something in an iframe? You don't show the HTML you're running on. As indicated [in this answer](http://stackoverflow.com/a/1088569/215552) you can't, if it's not in the same domain. And CORS won't help; see [this answer](http://stackoverflow.com/a/22413275/215552) for more on how that works... — Heretic Monkey, Jan 20 '17 at 22:29
@CBroe if you submit the answer as "Abandon ship", I will mark it. — AussieJoe, Jan 20 '17 at 22:46

score 2 · Accepted Answer · answered Jan 20 '17 at 23:43

Abandon ship?

Unless the other site is explicitly willing to cooperate: Yes.

Because the Same Origin Policy prevents you from accessing content from a different origin in any new tab/window/frame, and without the other site enabling CORS you can not use AJAX to get the content either.

score 1 · Answer 2 · answered Jan 20 '17 at 23:14

There is no good way to handle this kind of stuff in jQuery or normal Javascript! I would recommend you to learn python for your project, because python has some great modules for handling requests and parsing html-code.

Such as urllib, requests, BeautifulSoup, …

jQuery open external url and manipulate DOM

2 Answers2