Root relative paths not behaving as expected

[ArktekniK]

It appears that using domain relative paths the following does not behave as expected:

<!--Web Components shim for non-compliant browsers-->    
<script src="/js/ext/webcomponents-lite.js"></script>    

<!--Import JavaScript dependencies-->    
<link rel="import" href="/html/jsdependencies.html">    

<!--Import HTML dependencies-->    
<link rel="import" href="/html/htmldependencies.html">    

Each of these resolve to:
file:///C:/js/ext/webcomponents-lite.js
file:///C:/html/htmldependencies.html
file:///C:/html/jsdependencies.html

Am I missing something here?
Is there a special token or configuration to use to get this working as it should?

Thanks

[zg2013]

Please use nodejs to introduce the way
Not script src="***"
eg
require './res/lib/jQuery/jquery.json-2.4.min.js'

[ArktekniK]

Thanks for the response, although my intention is to keep my app source platform agnostic in case we need to run it as client-server. I still think this is a valid problem but for now I have altered links to relative paths.

[zg2013]

I know what you mean.
You are not using the nodejs environment in this case.

This article can help you:
https://github.com/atom/electron/blob/master/docs/api/web-view-tag.md

or set : new BrowserWindow(options)
node-integration Boolean - Whether node integration is enabled, default is true

I found,use < iframe src=A.html>，In A.html Can use “script ” Import.

I use the Google translation, tired :)

[bertyhell]

I found this solution for whomever it may concern:
The WEB_FOLDER contains the index.html and all other relative referenced content.
You can set it to any empty string if your index file isn't located inside a sub folder (web in this example)

function createWindow() {
  const WEB_FOLDER = 'web';
  const PROTOCOL = 'file';

  electron.protocol.interceptFileProtocol(PROTOCOL, (request, callback) => {
      // // Strip protocol
      let url = request.url.substr(PROTOCOL.length + 1);

      // Build complete path for node require function
      url = path.join(__dirname, WEB_FOLDER, url);

      // Replace backslashes by forward slashes (windows)
      // url = url.replace(/\\/g, '/');
      url = path.normalize(url);

      console.log(url);
      callback({path: url});
  });

  // Create the browser window.
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false
    }
  });

  // and load the index.html of the app.
  mainWindow.loadURL(url.format({
    pathname: 'index.html',
    protocol: PROTOCOL + ':',
    slashes: true
  }));

[veryfoodverygood]

Thank @bertyhell! I was having the same issue and that solution worked perfectly.

[piranna]

Thanks @bertyhell, I have been working one week trying to get this! Kudos! :-D

[zhengxiaoyao0716]

Thanks @bertyhell , but I tried it at version 3.0.8, it not works.
Althought it is really a function I saw in the electron.d.ts file, but I just got an error that said interceptFileProtocol is not a function.

BTW, is there any way to set the root path by the configure like baseuri or homepage?

I'm now trying to use electron with react, and by default,
the create-react-app will build the project with root-relative path,
like <script src="/${root}/static/js/main.xxx.chunk.js"></script>.
The ${root} value depending on the homepage field defined at the package.json.

Consider that if we use some web-server to serviced the built-project,
(for example, start the CMD at the build folder and typed npx http-server)
the link starts with / will find the file from the folder which the web-server startup at, such as the build folder.
But if we serviced the project used electron, then it will try to find the files from the root dist, such as c:/ on windows.
So I wander that maybe this inconsistency behaviour would caused some mistakes.

[zhengxiaoyao0716]

Well, I forgot to call the interceptFileProtocol after app.ready, it works now...
Still now work. What the request.url got is like file:///E:/path/of/project/file, so after path.join, we could only go something like E:\path\to\project\web_folder\E:\path\to\project\file.
Sliced the file: is not enought, maybe we should also sliced the //E:, but this may caused some others problem that it depended on Windows filesystem.

[avner-hoffmann]

@bertyhell - I tried to use your solution, but when I'm using interceptFileProtocol, even when all I do is calling callback(request.url) I'm getting a warning and an error on the renderer process:

Electron Security Warning (Insecure Content-Security-Policy) This renderer process has either no Content Security Policy set or a policy with "unsafe-eval" enabled. This exposes users of this app to unnecessary security risks.

For more information and help, consult https://electronjs.org/docs/tutorial/security.
This warning will not show up once the app is packaged.

Not allowed to load local resource: file:///....html

It seems like chrome is blocking the loading of a local index.html due to security reasons, which prevents loading the site...
Was this working on previous versions of electron using an earlier chrome?