Javascript run properly if the html opened locally. but it fails if accessed from http-server

Question

I have a html which embed a web widget from tradingview.com, the html file looks like below:

<!-- TradingView Widget BEGIN -->
<span id="tradingview-copyright"><a ref="nofollow noopener" target="_blank" href="http://www.tradingview.com" style="color: rgb(173, 174, 176); font-family: &quot;Trebuchet MS&quot;, Tahoma, Arial, sans-serif; font-size: 13px;">Economic Calendar by <span style="color: #3BB3E4">TradingView</span></a></span>
<script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-events.js">
{
  "width": "510",
  "height": "600"
}
</script>
<!-- TradingView Widget END -->

If you copy this code into jsfiddle, it can show a finance widget properly. If I open the file locally, everything works fine too and the widget show up. But If I put this file under a http-server running on my machine and access it from http://localhost , the file can be loaded but the widget does not display. Looks like the script does not run properly in this mode.

Any idea what can cause this type of issue?

Thanks.

Answer 1

You cannot run code inside of a script tag that has a src tag. If you read the w3 documentation here: https://www.w3schools.com/tags/tag_script.asp you'll see that they state:

Note: If the "src" attribute is present, the element must be empty.

Another thing you may want to check is to make sure that you can open secure web links on the server you are testing this on. Because the src of the file is https you need to make sure there aren't any issues with handling secure external links. You could try making a local copy of the file and running that locally and see if you still get the same results. If it starts working then its not pulling the file correctly from the external source.