Loading div from external site in Electron app

Question

TLDR: How can I show #div from another URL inside Electron app.

I'm learning javascript and I've came across this problem. I wanted to load specific div from another website inside electron app. Already tried looking for the solution online and reading docs, but that failed. I've tried using javascript with this:

$("#test_div-in_electron").load("https://some-website.com #test-div-on-webpage")

with scripts in index.html:

<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
<script src="../app/resources/js/renderer_main.js"></script>
<script>if (window.module) module = window.module;</script>

And it shows - nothing. blank div.

Answer 1

What you are doing is called a Cross Origin Request:

A web application makes a cross-origin HTTP request when it requests a resource >that has a different origin (domain, protocol, and port) than its own origin.

An example of a cross-origin request: The frontend JavaScript code for a web application served from http://domain-a.com uses XMLHttpRequest to make a request for http://api.domain-b.com/data.json .

For security reasons, browsers restrict cross-origin HTTP requests initiated from within scripts. For example, XMLHttpRequest and the Fetch API follow the same-origin policy. This means that a web application using those APIs can only request HTTP resources from the same origin the application was loaded from, unless the response from the other origin includes the right CORS headers.

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

In Electron, you can disable this security on opening the main window:

new BrowserWindow({
  ..
  webPreferences: {
    ..
    webSecurity: false
  }
});