Menu
I need to render iframe in my Electron application:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<iframe sandbox='allow-scripts' src='frm.html'></iframe>
</body>
</html>
where the frm.html links the local file script foo.js which is part of my Electron application
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<script src="foo.js"></script>
</head>
<body>
<p>Inside iframe</p>
</body>
</html>
When I run the application in Electron I can see this error in devtools console
Not allowed to load local resource: file:///C:/electron/app1/foo.js
Is it possible such scenario in Electron?
621
Read & Write Local FilesOne great benefit of using Electron is the ability to access the user's file system. This enables you to read and write files on the local system.
Just change the BrowserWindow' options: new BrowserWindow({ webPreferences: { webSecurity: false } }) If window's url points to a remote source, like http://..., browser will not allow to load local resource, unless you set the options above.
Use the object Tag as an Alternative to Iframe in HTML We can use the tag to display another webpage in our webpage. The object tag is an alternative to the iframe tag in HTML. We can use the tag to embed different multimedia components like image, video, audio, etc.
Electron's webview tag is based on Chromium's webview , which is undergoing dramatic architectural changes. This impacts the stability of webviews , including rendering, navigation, and event routing.
The HTML <iframe> tag specifies an inline frame. The src attribute defines the URL of the page to embed. Always include a title attribute (for screen readers) The height and width attributes specifies the size of the iframe. Use border:none; to remove the border around the iframe.
W3Schools is Powered by W3.CSS. The HTML <iframe> tag specifies an inline frame. An inline frame is used to embed another document within the current HTML document. Tip: It is a good practice to always include a title attribute for the <iframe>.
Tip: It is a good practice to always include a title attribute for the <iframe>. This is used by screen readers to read out what the content of the iframe is. Use the height and width attributes to specify the size of the iframe.
The sandbox attribute enables an extra set of restrictions for the content in the iframe. When the sandbox attribute is present, and it will: block automatically triggered features (such as automatically playing a video or automatically focusing a form control)
This is a security feature of the iframe. Here is a similar question that talks about loading linked files into an iframe: Displaying local htm file in iframe?.
That being said, have you considered using the webview tag instead? http://electron.atom.io/docs/v0.30.0/api/web-view-tag/. The webview tag is very similar to an iframe, but gives you more ability to control the security around it. I tested loading a local file into a webview in the same way you attempt to load frm.html into the iframe and it works flawlessly.
91
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
