Fetching images stored on an external website and loading them into an iframe within an Electron application

I am contemplating turning my website into a desktop application using either an iframe or webview within an Electron app. My website contains numerous images that I wish to cache in the Electron app to prevent repeated downloads.

Is it possible to access these locally stored files, bundled within the Electron app, from the remote site loaded within the iframe/webview?

Answer №1

We encountered a challenge in finding a direct solution for this issue. Despite the complexity, we devised a creative workaround that appears to effectively address the problem:

  • Encode all assets into base64 data URI's and store them in a JSON file with the asset URL serving as the identifier.
  • Utilize postMessage or ipc to request these assets from the application within the iframe/webview.
  • Capture and respond to this request by transmitting the JSON object back to the iframe/webview.
  • Upon loading the assets, validate if the URL exists in the object and utilize the base64 data URI; otherwise, proceed with the standard loading process.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I add an item to an array within another array in MongoDB?

I currently have a Mongoose Schema setup as follows: const UserSchema = new mongoose.Schema({ mail: { type: String, required: true }, password: { type: String, required: true }, folders: [ { folderName: { type: S ...

What mechanism enables the scores on this sports ticker to refresh automatically without relying on ajax calls?

While browsing scores on , I found myself intrigued by the way they update their scores without using ajax calls or iframes. It's a mystery to me how this functionality is achieved. Can anyone shed some light on how it works? ...

Tips for fixing the async/await problem in JavaScript

Here is the code I've been working on: let icsFileData = []; icsFileData = filterAttachmentArray.map(async(file) => { let buff = new Buffer(file.data, 'base64'); let text = buff.toString('ascii'); const data = await ical ...

Step-by-step guide on how to load an Ext JS tab after clicking on it

I have an Ext JS code block that creates 4 tabs with Javascript: var tabs; $(document).ready( function() { fullscreen: true, renderTo: 'tabs1', width:900, activeTab: 0, frame:true, ...

Consolidating various JavaScript events into one single event

Whenever a user types a key, my function is triggered. I want to consolidate these events so they only occur at a maximum rate of 500ms. Is there a simple method to achieve this in Javascript or through a commonly used library? Or should I create my own t ...

Issues are being faced with the execution of JavaScript on Heroku when using Rails 3.1

After upgrading a Rails 3.0 app to 3.1 on Heroku running on the cedar stack, everything seemed fine except for one major issue - the app's JavaScript wouldn't run. Despite the application.js file being compiled and accessible at myapp.com/assets/ ...

Unique Soundcloud visualization using webglonDeletegist

After going through the SoundCloud documentation, I have been trying to figure out how to create a visualizer for SoundCloud tracks. The challenge is that in order to achieve this effectively, I need access to the source waveform. I suspect that direct acc ...

Navigate through each element with a specific class name in a block of HTML code using

Currently, I am dealing with an HTML string that is being retrieved through AJAX. Let's assume it looks like this: var htmlString = '<div class="post"></div><div class="post"></div>'; I want to find a way to iterat ...

What is the process for utilizing node modules within the Alexa Developer Console?

Struggling with creating an Alexa skill that utilizes a Node.JS API with a module requiring npm installation? Unable to upload the node modules due to the absence of an upload button and console for npm install? Seeking guidance on how to proceed? ...

Issues with retrieving the output of a function nested within another function through an ajax request

I am attempting to use jQuery to add the results of an ajax call to a paragraph. My goal is to extract the "myResult" variable from the inner getResult function and transfer it to the outer buildParagraph function. Unfortunately, the returned value is und ...

React component utilizes Material UI to detect scrolling within a table

Currently, my table's body size is set to fixed dimensions in accordance with Material UI guidelines. I am looking to implement a functionality that allows me to dynamically load more rows as the user scrolls through the table. Can you recommend the ...

Issue with clearTimeout function not functioning properly on keyup event in iFrame

While there may be many similar questions out there, I have yet to find a solution that works for me. Currently, I am developing a WYSIWYG editor and I want it to save when the user performs a keyup action. However, I do not want it to update after every ...

Customizing the appearance of the Bootstrap Typeahead

I've been experimenting with the Bootstrap Typeahead for my search feature. I successfully implemented the dropdown list using Ajax. However, I am looking to customize the width, padding, and background color of the dropdown menu, which is currently w ...

Receive axios responses in the exact order as the requests for efficient search functionality

Currently, I am working on integrating a search feature in React Native using axios. For the search functionality, I am incorporating debounce from lodash to control the number of requests being sent. However, there is a concern about receiving responses ...

What is the process for retrieving user data from Postgresql using axios.get when the data is already stored within the database?

Using auth0 for user sign up, my React app automatically retrieves user information upon logging in and sends a POST request with axios to the backend. The user ID is stored in userId and the user information is stored in currUser. However, upon logout and ...

Having trouble understanding how to receive a response from an AJAX request

Here is the code that I am having an issue with: render() { var urlstr : string = 'http://localhost:8081/dashboard2/sustain-master/resources/data/search_energy_performance_by_region.php'; urlstr = urlstr + "?division=sdsdfdsf"; urlst ...

Guide to setting up jQuery Mobile with bower

For my project, I'm interested in utilizing jquery-mobile through bower. In order to do so, I need to execute npm install and grunt consecutively within the bower_components/jquery-mobile directory to access the minified .js and .css files. This pro ...

Display an aspx page within a div container

I am using the following code to load an aspx page in a div tag. Unfortunately, it's not working as expected. Can someone please assist me in resolving this issue? <script type="text/javascript"> $(document).ready(function () { $(&a ...

Sending two values from an HTML form using Ajax

Looking to transfer two values from my HTML code to the PHP code: one for 'up' or 'down', and the other for the post ID. I have a system where users can vote on posts by clicking either 'up' or 'down' arrows next to ...

Tips for executing an npm command within a C# class library

I am currently developing a project in a class library. The main objective of this project is to execute a JavaScript project using an npm command through a method call in C#. The npm command to run the JavaScript project is: npm start The JavaScript ...