I can show an image inside a zip file in electron using the following code.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<img src="zip_resources://images.zip/apple.jpg"/>
<script>
// You can also require other files to run in this process
require('./renderer.js')
</script>
</body>
</html>
renderer.js
protocol.registerBufferProtocol("zip_resources", async (request, callback) => {
const urlExploded = request.url.split("/"); // [ 'zip_resources:', '', 'images.zip', 'apple.jpg' ]
const zip = urlExploded[2]; // images.zip
const fileName = urlExploded[3]; // apple.jpg
const fileContents = await extractFileFromZip(zip, fileName);
callback({ data: fileContents, mimeType: "image" });
});
As you can see, to make it work, I created a custom protocol zip_resources:// and told electron how to load resources from this protocol by using registerBufferProtocol. But what if the img tag is in a webview? Like this.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<webview
src="data:text/html,<img src='zip_resources://images.zip/apple.jpg'/>"
/>
<script>
// You can also require other files to run in this process
require('./renderer.js')
</script>
</body>
</html>
How to make webview load this kind of resources correctly?
Related
I have a simple text file in the same directory as HTML file , I used the fetch command in javascript to display the text file content in the page div section when the loading of the page finish
however, my code doesn't work and nothing has been displayed, my question is does the fetch command suitable for such a task or should I use filereader ?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Page</title>
<meta name="generator" >
<style type="text/css">
</style>
<script type="text/javascript" defer>
const myfile=location.href.slice(0,location.href.lastIndexOf("/"))+"/a.txt"
console.log(myfile);
async function getTextFile1() {
try {
const response = await fetch(myfile, { mode: 'no-cors' });
const fileText = await response.text();
//console.log(window.location);
//console.log(window.location.href);
const tagElement = document.getElementById("about_layer");
tagElement.innerText = fileText;
} catch (error) {
console.log(error);
}
}
window.onload = getTextFile1;
</script>
</head>
<body>
<div >should be placed here </div>
<div id="about_layer">
</div>
</body>
</html>
There is nothing wrong with your code , just try running your html file using development server .
You can use Live Server visual studio code extension for that.
I want to download "example.mp4" to my iPhone using FileSaver.js.
But when I download it in chrome, it downloads the file as "document".
donwload in chrome
Does anyone know how to solve this problem?
my code
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Download Sample</title>
<script src="js/FileSaver.js"></script>
<script type="text/javascript">
const contents_url = "a.mp4";
const file_reader = new FileReader();
var out;
file_reader.onload = function (e) {
saveAs(e.target.result, "example.mp4");
}
function handleDownload() {
out = new Blob([contents_url], { type: 'video/mp4' });
file_reader.readAsDataURL(out);
}
</script>
</head>
<body>
Download
</body>
</html>
my environment
iOS : 14.1
chrome version : 86.0.4240.93
things to try
I tried downloading in safari and was able to download in "example.mp4".
I need my webite to display info in a certain language, based on a query in my webite's URL (e.g. www.website.com/index.php?country=FR). How can I do that with vanilla JS and not React/Angular?
My approach:
1) JS recognizes a query in the URL (in this case- 'country=FR') and then appends a js file, which has neccessary french words in it defined by variables.
2) JS in my script tag that's in the HTML file, appends the main page markup text with template literals in it.
3)
I don't know, whether the browser fails to either fetch the language file itself or its variables. At the moment it does not render anything.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./js/main.js"></script>
</head>
<body>
<script>
const template= `
<h1>Good Morning: ${goodmorning} </h1>
<h2>Good Evening: ${goodevening} </h2>
<h3>My name is: ${mynameis}</h3>`
function markupAppend() {
$('body').html(template);
console.log('Markup loaded')
}
markupAppend()
</script>
</body>
</html>
=========================
Main.js
var domain = window.location.href;
var FRString = domain.includes("country=FR");
var ESString = domain.includes("country=ES");
if (FRString) {
$('head').append(`<script src="./Language_files/FRENCHwords.js" />`)
}
if (ESString) {
$('head').append(`<script src="./Language_files/SPANISHwords.js" />`)
}
=========================
FRENCHwords.js
const goodmorning = 'Bonjour';
const goodevening = 'Bonsoir';
const mynameis = 'Mon nom est';
=========================
SPANISHwords.js
const goodmorning = 'Buenos dias';
const goodevening = 'Buenas tardes';
const mynameis = 'Mi nombre es';
No errors displayed, the page is just not rendering...
In Your main.js file, you are using domain.includes, it only returns the domain name but not the entire URL. You can use window.location.href.includes for this.
Instead of: domain.includes("country=FR");
Try: window.location.href.includes("country=FR");
I'm trying test of Electron app with Spectron.
But I can't test client window javascript global variable.
Here is my simplified code.
Please help me.
Thanks.
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>MY ELECTRON</title>
<script type="text/javascript" src="script.js"></script>
<link href="./style.css" rel="stylesheet">
</head>
<body>
</body>
</html>
script.js
let mode;
function onload_func(){
mode = 'normal';
}
window.onload = onload_func;
spec.js
const Application = require('spectron').Application
const assert = require('assert')
const electronPath = require('electron')
const path = require('path')
let app;
describe('Application launch', function () {
this.timeout(10000)
beforeEach(function () {
app = new Application({
path: electronPath,
args: [path.join(__dirname, '../src')]
})
return app.start()
})
afterEach(function () {
if (app && app.isRunning()) {
return app.stop()
}
})
it('initial mode',function(){
assert.equal(app.client.mode,'normal');
})
})
I'm not sure if it will solve your specific tests, but app.browserWindow should do the trick since as they say:
It provides you access to the current BrowserWindow and contains all
the APIs.
Note that it's an alias to require('electron').remote.getCurrentWindow()
Read more: https://github.com/electron/spectron#browserwindow
I'm playing around with ReactJS. I have defined three components, which are nested:
UserProfile.jsx
var React = require('react');
var UserProfile = React.createClass({
getInitialState: function() {
return {
username: "zuck"
};
},
render: function() {
return (
<UserProfile>
<ProfileImage username={this.props.username}/>
<ProfileLink username={this.props.username}/>
</UserProfile>
);
}
});
React.render(<UserProfile username="zuck"/>, document.body);
module.exports = UserProfile;
ProfileLink.jsx
var React = require('react');
var ProfileLink = React.createClass({
render: function() {
return (
{this.props.username}
);
}
});
module.exports = ProfileLink;
ProfileImage.jsx
var React = require('react');
var ProfileImage = React.createClass({
render: function() {
return (
<img src="//graph.facebook.com/{this.props.username}/picture"/>
);
}
});
module.exports = ProfileImage;
My html file basically only includes the three jsx files (btw, is there a way to bundle all these into a single request during development?)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React FB Link</title>
</head>
<body>
<script type="text/javascript" src="UserProfile.jsx"></script>
<script type="text/javascript" src="ProfileLink.jsx"></script>
<script type="text/javascript" src="ProfileImage.jsx"></script>
</body>
</html>
I'm using beefy to handle and serve the JSX files, using beefy *.jsx 8000 -- -t reactify.
The resulting files are (in truncated form):
UserProfile.jsx
ProfileLink.jsx
ProfileImage.jsx
Loading the html page results in an error:
Uncaught ReferenceError: ProfileImage is not defined
with reference to line 15 in UserProfile.jsx:
React.createElement(ProfileImage, {username: this.props.username}),
You might need to load ProfileImage.jsx and ProfileLink.jsx before your UserProfile.jsx since right now the page is parsing Userprofile.jsx first and it doesn't know what ProfileImage mean (because you haven't loaded it yet)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React FB Link</title>
</head>
<body>
<script type="text/javascript" src="ProfileLink.jsx"></script>
<script type="text/javascript" src="ProfileImage.jsx"></script>
<script type="text/javascript" src="UserProfile.jsx"></script>
</body>
</html>
You can use any module bundler to bundle up your files (Browserify, Gulp, Webpack) into one single file as entry point