This sample works in codepen, but not work in my html file?
why is this happening?
i already tried to add https:// to href, but still not working
<script async src="//s.imgur.com/min/embed.js" charset="utf-8"></script>
a
<blockquote class="imgur-embed-pub" lang="en" data-id="KUteCdn">
View post on imgur.com
</blockquote>
My guess is that this is a CORS related issue, verify this by checking your js console. To rectify this, you can run a simple HTTP server and serve the html file from there.
on Mac OS you run the following in terminal from your working directory
http-server -p 4090 .
In your web browser, navigate to http://localhost:4090
This will stop you from receiving such an erroe
Related
I have a static index.html in wwwroot of an asp.net core web project which useStaticFiles:
<html>
...
<body>
...
<script src="~/scripts/bundle.js"></script>
</body>
</html>
After web application published. the bundle.js could not load successfully, after F12 in Chrome and found browser trying to load js by url:
https://127.0.0.1:5001/~/scripts/bundle.js
Please help a clue. thanks!
By the way, the web application run fluently without such errors locally.
It's actually an Nginx configuration issue. https://www.***.com/subpath1/test.html.
nginx proxied subpath1 to local port 5588 where test.html hosted in.
In test.html <script src="bundle.js"> didn't refer to
https://www.***.com/subpath1/bundle.js as expected but https://www.***.com/bundle.js
So update test.html src attribute src="subpath1/bundle.js" solved the problem.
Thanks all~
I don't know if this is good place to ask this question but i just started studying reactjs and stuck in the beginning, here is the question.
I have installed node and Installed http-server from the npm command on the command prompt npm install -g http-server and went to the directory where is my static files and run command http-server and then to the browser hit localhost:8081.
Nothing happens/shows on browser but on command prompt it shows that its running and working properly, everytime i refresh browser then it shows on command prompt working. So why nothing happens on browser ?
here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1">
<title>Demo</title>
<script src="https://unpkg.com/react#16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
</head>
<body>
<div id="example">
</div>
<script type="text/babel">
ReactDOM.render(
<h1>Something</h1>, document.getElementById('example'));
</script>
</body>
</html>
If you are looking for an alternative/easy way to set up a react application without having to worry about the messy configuration settings from the beginning, then I recommend using facebooks create-react-app starter code.
I realize this does not help you if you wished to learn the setup process, but for jumping right into react routing and learning that it is a great resource! I start most of my web-applications using this. It can also be easily modified to implement express for when you delve even further into the world of web-dev. I believe the starter code is also set up with web-pack and supports hot-loading, so any changes you make will automatically be refreshed/reflected after hitting save and you do not need to restart/republish to the server!
On top of that, this book is also a great resource for learning react, the DOM, JS, Express, and the like. I read and worked through the last edition (published 2017?) and found it super useful, hopefully this newer edition holds the same reputation.
Web-pack in itself is another large topic, and I endorse you to read up on it's capabilities, functions, high level design/implementation and the like as it is really interesting! Happy transpiling!
It looks like there is an ongoing issue with http-server. However, we can fix this using this tweak.
Try accessing your file in localhost with the filename after running http-server command.
For example, if your file name is somefile.html, try accessing this file like http://localhost:8081/somefile.html
I want to embed a video stream in a html page. I run apache on a raspberry pi. With the standard index.html it works fine. When I change to my custom index.html, it says the page takes too long to load. This occurs when I access from another network (the internet) not the local network.
This is the content of the html page:
<html>
<head>
</head>
<body>
<iframe src=”http://192.168.1.56:8081” height=”480” width=”640”>
</iframe>
</body>
</hmtl>
My research has led me to X-Frame-Options (this is the best reference https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options i found).
I have enabled the headers module
a2enmod headers.load
systemctl restart apache2
and added the following line at the end of the apache2.conf file
Header always set X-Frame-Options “ALLOW-FROM http://192.168.1.56:8081”
Could you please help?
Thanks!`
I have a simple Angular application that I am bundling with Gulp. The index.html has a script reference of:
<script src="./../../js/all.js" charset="utf-8"></script>
and a file structure:
Does this not seem accurately relative?
I am also serving from the public/html/layout/index.html
try
<script src="../../js/all.js" charset="utf-8"></script>
The resolution involved a best practice of placing the index.html at a higher level directory. Still didn't explain why the issue occurred, but the issue is no longer affecting me.
If you are using Google Chrome then you can open your index.html in the browser and goto View Source.
Find this line in the source: <script src="./../../js/all.js" charset="utf-8"></script>
and click the hyperlink of the file. It will then show you the complete address of the javascript file the browser is trying to load. Once you get the complete address I believe you can fix this issue easily.
I have developed a chrome extension and I want to have the inline installation on my website.
I have the following code but it does not seem to work:
<head>
<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/-extension_ID-">
<script>
function ExtInstall() {
if (chrome.app.isInstalled)
alert("already installed!");
else
chrome.webstore.install();
}
</script>
</head>
<body>
<button onclick="ExtInstall()" id="install-button">Add to Chrome</button>
</body>
I have also linked the website with the extension, but it does still not working. The chrome.app.isInstalled returns always false even if I have the extension installed and chrome.webstore.install(); does nothing.
Any ideas?
After discussing with the poster, it turns out to be a Chrome bug, where verified sites that have port numbers are not handled correctly (i.e. if the verified site is example.com:1337, inline installation requests from http://example.com:1337/install.html will fail with "Installs can only be initiated by the Chrome Web Store item's verified site".
I have filed Chromium bug 110917 to track this.