-1

I am loading an external site to a hybrid app.

Jquery code

<script>
$(document).ready(function () {
    $("#div").load("https://test.com");
});
</script>

I would like to understand why it does not load scripts and CSS, it's a CORS problem or something, what is the alternative?

Otávio Barreto
  • 1,536
  • 3
  • 16
  • 35

2 Answers2

1

do you own the external site? if so you can adjust CORS settings on both servers to allow cross domain scripts and css.

If you want to embed a full external website the easiest way is to use an iframe

<iframe id="myIframe" src=""></iframe>

extended answer from your comment. You can test the source via xhr and inject the iframe src if it gives a successful response. It's not 100% but probably the closest you'll get without compromising security.

// jQuery
$.ajax({
  url: 'https://test.com',
  dataType: 'JSONP',
  type: 'GET',
  async: false,
  crossDomain: true,
  success: function () { },
  failure: function () { },
  complete: function (data) {
    if (data.readyState == '4' && data.status == '200') {
      console.warn({ Status: 'SUCCESS' })
      $('#myIframe').attr('src', 'https://test.com');
    }
    else {
      console.warn({ Status: 'FAIL' })
    }
  }
});
digital-pollution
  • 1,054
  • 7
  • 15
  • this question came from my old question that i still did't solved , I tried with iframe but I had this problem, please check https://stackoverflow.com/questions/57751088/javascript-check-if-a-iframe-failed-to-load – Otávio Barreto Sep 04 '19 at 02:44
  • You can't detect an iframe state it's setup to embed external sources independent from it's parent page for security reasons, and you can't do a full cross domain load via xhr also for security reasons. But you could do something creative like test the connection with a xhr if you get a successful response then load the src into the iframe if failed then you can load/redirect to your error page. Not 100% sure fire solution but it's one that will work without compromising the security of your users – digital-pollution Sep 04 '19 at 02:53
  • how can I implement a solution using service worker? – Otávio Barreto Sep 04 '19 at 02:59
  • service workers are fully asynchronous it wouldn't work with what you're trying to implement here . – digital-pollution Sep 04 '19 at 03:05
  • your ajax implementation is not changing `.attr('src` of the frame – Otávio Barreto Sep 04 '19 at 03:06
  • Thanks a lot, good solution! so on the fail function I can return a local file for the iframe right ? – Otávio Barreto Sep 04 '19 at 03:27
  • you should be able to use the success or fail callbacks but it looked like testing the data.status value within the complete callback might be the surer option when I was testing – digital-pollution Sep 04 '19 at 03:29
  • how can I let the loading message to fade out `$("#loadingMessage").fadeOut(3000);` when it loads the frame, and on the fail function let it showing the loader ? – Otávio Barreto Sep 04 '19 at 03:37
  • I edited the question, please check new code, for some reason it works on js fiddle https://jsfiddle.net/afd4Lz5j/ but do not works when I save in a html file and open on desktop – Otávio Barreto Sep 04 '19 at 13:29
  • I solved with the following, I had to add to add jquery scipts on the header of the page, not worked when It was on the footer – Otávio Barreto Sep 04 '19 at 14:24
  • 1
    yes the load order is import jQuery needs to be at the top and loaded before you can use any JQuery methods. I'd suggest you get in some practice at using the console in your browser, press f12 and look at all the tabs in particular the console which will give you good hints on what went wrong if something does. Get familiar with this tool and it'll help you a lot with understanding how it all works. best wishes on your learning journey :) – digital-pollution Sep 04 '19 at 20:34
1

Yes, this is CORS related and is implemented in modern browsers to protect the user from cross site scripting attacks and the like. Some older browsers (looking at you, IE) don't have these same restrictions and you'll probably find the code you supplied above will work to some limited extent.

For the record, I recommend against cross-site applications and unless you are the owner of the external site and have the ability to modify the response headers, you can't do this anyway. If you do have modify access to the external site, you can implement a solution with an iframe.

https://www.w3schools.com/tags/tag_iframe.asp

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options

Mark
  • 1,115
  • 1
  • 7
  • 13
  • this question came from my old question that i still did't solved , I tried with iframe but I had this problem, please check https://stackoverflow.com/questions/57751088/javascript-check-if-a-iframe-failed-to-load – Otávio Barreto Sep 04 '19 at 02:45