I'm using Turbolinks on my website. My website has many pages where each page has a unique JS file in addition to the "base" js file.
Every page has the following scripts in its head:
<head>
...
<script defer src="/js/manifest.js" data-turbolinks-track="reload"></script>
<script defer src="/js/vendor.js" data-turbolinks-track="reload"></script>
<script defer src="js/app.js" data-turbolinks-track="reload"></script>
...
</head>
Every page may include another JS file in its body:
<body>
...
<script src="/js/pages/page1/index.js"></script>
</body>
Now many pages may load the same js file in their body tag:
Page1:
<body>
...
<script src="/js/pages/page1/index.js"></script>
</body>
Page 2:
<body>
...
<script src="/js/pages/page1/index.js"></script>
</body>
Page 3:
<body>
...
<script src="/js/pages/page3/index.js"></script>
</body>
Note how Page 1 and Page 2 load the same js file.
In order to build those JS files I use Laravel Mix which uses Webpack to compile and bundle the JS files.
When navigating between pages, since the JS file is embedded in the <body> element, the JS file is being re-downloaded (from cache) and re-evaluated by the browser. One would expect that if page1/index.js content is: console.log('hey');, they would see hey printed in their console for every page that loads the page1/index.js page.
However, unfortunately it is not the case. It seems like the browser does re-downloads the JS file, but for some reason, its content is not being executed. I believe this is due to the transpiled file's content. Because we are using Webpack to bundle the files, the file's content always starts with the following script:
(window.webpackJsonp=window.webpackJsonp||[]).push(...
It looks like Webpack is managing the runtime scripts on its own in order to keep track of dependencies (and also "lazy" dependencies). Inspecting the window.webpackJsonp variable does indeed reveals 2 entries for the pages1/index.js file (the first entry is when the page was first loaded, the second one is when we navigated to another page that loaded that same file).
For some reason, Webpack decides not to re-run the script on subsequent page visits (using Turbolinks) which breaks the application.
Any ideas about what I can do in order to solve this are highly appreciated!
Related
I have Angular 7 application deployed to Azure App Services. After each new deployment, even if I start a new browser, I have to manually refresh or hard refresh the browser page in order to see the new changes.
I can see in my deployment, the index.html file does have the new hashed file name embedded each time.
<script type="text/javascript" src="runtime.5959ec9531e22bc6ae82.js"></script>
<script type="text/javascript" src="es2015-polyfills.d9df4d9cef7e9c40c764.js" nomodule></script>
<script type="text/javascript" src="polyfills.eb0596823492af2b4693.js"></script>
<script type="text/javascript" src="main.1eb70d066995e0724818.js"></script>
Why the application didn't reload the index.html automatically? How to solve this problem?
The generated index.html which contains the links to your latest scripts is cached.
I would recommend to disable the caching for the location /index.html file only, so the browser ALWAYS loads at least the index.html.
Because the generated css and js contains a hash in the filename that changes if the resulted file changes after the build, the user should always get the latest version.
Update: this turned out to be a memory cache issue where both Firefox and Chrome were pulling the properties.js file from memory cache on each page refresh instead of downloading a fresh version from the server. The Network tab tip from below comments allowed me to see this behavior. Thanks for that!
Using meta tagging in the HTML files as follows did not help at all:
<meta http-equiv=“Pragma” content=”no-cache”>
<meta http-equiv=“Expires” content=”-1″>
<meta http-equiv=“CACHE-CONTROL” content=”NO-CACHE”>
I am developing a UI dashboard with multiple HTML5 pages that show values that change every few minutes. The values come from APIs that I parse with JQ and then use bash to update a properties.js file. The multiple HTML5 pages src this properties.js file to assign values to JavaScript variables in the HTML5 pages.
The problem is, this works for the 1st HTML5 page but the 2nd HTML5 page is not getting the values. If I comment out the 1st page's "src" line, the 2nd page gets the values. Seems the way I am doing this is only good for populating values into a single HTML5 page. I would rather not clone the properties file for each HTML page. I am trying to find a way to make all HTML5 pages populate the values from a single properties.js file.
[FILE1.HTML]
<head>
...
<script type="text/javascript" src="./properties.js"></script>
...
</head>
<body>
...
<main>
...
<div class="text-value" id="ts1_info.var1"></div>
...
<script type="text/javascript">
document.getElementById("ts1_info.var1").innerHTML = ts1_info.var1;
</script>
...
</main>
</body>
[FILE2.HTML]
<head>
...
<script type="text/javascript" src="./properties.js"></script>
...
</head>
<body>
...
<main>
...
<div class="text-value" id="ts1_info.var1"></div>
...
<script type="text/javascript">
document.getElementById("ts1_info.var1").innerHTML = ts1_info.var1;
</script>
...
</main>
</body>
[PROPERTIES.JS]
var ts1_info;
ts1_info = {
var1: "my_value",
...
;
[File Hierarchy]
page1.html
|
|_ page2.html
|_ properties.js
In page1.html the src line is going down 1 level as such:
<script type="text/javascript" src="./sub_directory/properties.js"></script>
In page2.html the src line is going to the same level:
<script type="text/javascript" src="./properties.js"></script>
Try to store variables in local storage that you want to access across other pages. Local storage allow to save key/value pairs in a web browser, so when variable is updated by one page it will be also available to another page.
You normally don't use . in the path of linking to script files, try
<script type="text/javascript" src="sub_directory/properties.js"></script>
and
<script type="text/javascript" src="properties.js"></script>
It really makes no sense that it works for a different file name, but not the same one.
This appears to be a browser cache issue. I need to figure out how to force both Chrome and Firefox to download the properties.js file freshly on every page refresh instead of getting from cache.
Something I tent to do when I want to prevent my scripts from being cached is to add a parameter at the end of the file path like so: scripts.js?v=0001 or in my php projects, I use npm to add a uuid to the end of the file name everytime it is updated.
You can checkout more here: How to Prevent Caching of Javascript
Just trying to point you in the right direction! Hope this helps.
I have a problem with initializing internal file.
Specifically https://www.detectadblock.com/
I can't initialize this ads.js file on my project.
var e=document.createElement('div');
e.id='punVTqCWOHsB';
e.style.display='none';
document.body.appendChild(e);
My web browser always failed with loaded script. Any suggestions how can I proceed?
Loading failed for the with source “127.0.0.1:8888/AdBlock/src/com/example/myproject/public/ads.js”." github.com/marosmamrak/AdBlock-1.git
You are giving the full path to the source files (in src/.../public), but that file will be copied with the rest of the GWT compiled sources, so it should be inside the adblock directory to match your .nocache.js file:
<script type="text/javascript" language="javascript" src="adblock/adblock.nocache.js"></script>
<script type="text/javascript" language="javascript" src="adblock/ads.js"></script>
Also please note that this does nothing at all, since the browser can't execute Java files directly:
<script src="/AdBlock/src/com/example/myproject/client/Flipper.java"></script>
I have a weird implementation. I have a website built in PHP (http://phpsite.com) and it has a template with a header and footer and sidebar etc with a content area where I place my compiled angular2 app files (hosted at http://awss3bucket.com). We are hosting the angular2 app in a separate S3 bucket and are loading the JavaScript files on http://phpsite.com.
Essentially the php file looks like this:
<html><head></head>
<body>
<?php include "../header.php";
include "../sidebar.php";
<app-root>Loading...</app-root>
<script type="text/javascript" src="https://awss3bucket.com/inline.bundle.js"></script>
<script type="text/javascript" src="https://awss3bucket.com/polyfills.bundle.js"></script>
<script type="text/javascript" src="https://awss3bucket.com/styles.bundle.js"></script>
<script type="text/javascript" src="https://awss3bucket.com/vendor.bundle.js"></script>
<script type="text/javascript" src="https://awss3bucket.com/main.bundle.js"></script></body></html>
When I tried this implementation with the bundled angular files on the same filesystem as the phpsite.com website, it works perfectly fine. But when I try to load them from the S3 bucket, then the relative links that are used in the template file and css files break because they get generated as relative urls and the assets are not on the original.
So my question is, is there a way to change where each component's relative url points to? I can't set a base url because then it'll mess up the assets that are already existing on phpsite.com. For the time being we are using iframe but that is not ideal.
Thanks!
I have a problem with my a javascript file im refrencing to a master page.
this is the code:
<head runat="server">
<type="text/javascript" src="../Jquery1.6_vsdoc/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
the jquery files work fine, but the main.js not.
when i open the aspex file on the web browser and do view source, and try to see the code on the main.js file iis show this message:
HTTP Error 404.0 - Not Found The resource you are looking for has been
removed, had its name changed, or is temporarily unavailable.
what do i do worng here?
some info on the file (if it will help):
he is the same directory of the master page
he is ony refreced in 1 master page.
im using visual studio 2012
(sorry for my english)
Use Page.ResolveUrl() in Master Page scenarios
so your reference should look like this
<type="text/javascript" src="<%= Page.ResolveUrl("~/Jquery1.6_vsdoc/jquery-1.7.1.min.js") %>"></script>
<script type="text/javascript" src="<%= Page.ResolveUrl("~/main.js") %>"></script>
This will ensure that the page is mapped correctly as the Child Page may not be in the same location as the Master Page