Javascript update js file

Force-refreshing only JavaScript files in Firefox and Chrome

I want to clear only JavaScript files from my web browsers (Firefox and Chrome). I am doing JavaScript debugging, and it’s annoying that my JS just won’t get updated whenever I change my JS files. The only thing I can do now is to clear my cookies, but doing that erases all of my browsing history. How can I clear/refresh the JavaScript files that have been loaded into my browsers without clearing out other files?

12 Answers 12

I do this myself for development. I use Ctrl + F5 . It’s like a force refresh. This refreshes the page including re-downloading any referenced JavaScript files or CSS files even if they were cached.

It will NOT clear anything else such as your browsing history.

But please note that although I know this works in Firefox, and probably Internet Explorer, I am not sure if Ctrl + F5 works the same way in Chrome.

On some browsers you can use ` Ctrl + Shift + R to do the same task.

I appreciate that. But please note that although I know this works in Firefox, and probably IE, I am not sure if CTRL-F5 works the same way in Chrome.

Same with Chrome 21 beta on Win7 — refreshing the page with ctrl-f5 doesn’t re-request the JS file (I’m using Charles to double verify).

actually chrome treats first ctrl+f5 as normal refresh by design, subsequent ctrl+f5 (more then one) in short time will force reload of all sources

With Chrome:

Starting with Chrome 15, open the Developer Tools, click on the cogwheel at bottom left of the screen, and select the checkbox Disable cache.

This way, you will be sure that resources are always reloaded from the server, and you don’t have to manually clear the cache, which might also remove cached data for unrelated sites.

On a second take, it looks like these options are only active when the devtools is visible: twitter.com/ChromiumDev/status/227356682890670080 (from stackoverflow.com/a/7000899/372654)

I disagree with @7wp. Since some of your end users aren’t familiar with the Ctrl + F5 function, and some aren’t even aware of the differences between browsers and even the existance of other browsers (elders for example) you should force the browser to download a new copy of the JS/CSS files.

The best solution here is to add the timestamp at the end of the .js/.css filenames, or add the svn version which is a great idea too.

You might want to try clearing just your cache, and not your entire browsing, history, cookies, passwords, saved form data, and whatnot (the default).

Then make sure only «Cache» is selected before selecting «Clear Now.»

In Chrome (don’t know what particular version you’re using, as I use the dev builds), go to

Wrench Icon (Tools) » Options » Personal Stuff tab » Clear browsing data.

Again, make sure only «Empty the cache» is checked.

Alternatively, you can try opening up a new Private session in Firefox or Incognito window in Chrome; neither should cache any files (including your .JS files) you automatically download and process when browsing.

I open the JavaScript file in a separate tab, Shift + refresh, verify that I’m seeing the latest changes, then Shift + refresh the actual page (actually, in my case, frame in a frameset, which seems to make matters worse). This works almost all the time.

I’ve been using a little trick on a site that I’m working on. for the same reasons as you. I make small changes and have JavaScript code loaded by JavaScript code and want to make sure that I’m always working with the current (non-cached) script.

Try making the JavaScript code you are loading into a PHP file. simply put at the beginning and put on the ext of .php.

var fileref = document.createElement('script'); fileref.setAttribute("type", "text/javascript"); // The Date added to the file doesn't effect the results but // helps Internet Explorer be sure to refresh the data and // not use cache var d = new Date(); var t = d.getTime(); fileref.setAttribute("src", filename + ".php?date=" + t); fileref.setAttribute("id", filename); 

Because the name changes, Internet Explorer thinks it is a new file 😉

Источник

Методика обновления JavaScript кода через Ajax?

Здравствуйте. Извиняюсь, если я не точно формулирую вопрос, потому что если бы я знал как его формулировать точно, нашел бы в тырнете.

Вопрос касается методики обновления приложения работающего на Ajax. Без F5(обновления), а так же вообще без перезагрузки окна.

Существует методика обновления JS, CSS, файлов основанное на добавлении к параметрам запроса версии, например метки времени файла. Данная метка генерируется скриптом. Браузер воспринимает ситуацию так, что начинает перезагружать файл, тем самым он обновятся, при этом не факт что внутри файла были обновления.

К примеру такая система обновления у vk.com и хабрахабра. Вот и у меня при слиянии файлов получается что-то вроде этого:

Все оно безболезненно обновляется при F5 (обновление), и без него. Но при работе через Ajax после обновления приложения возникают проблемы работы. Возникает вопрос как обновить приложение. Ответ на то, как это делать с CSS файлами я нашел, и соотвественно я его просто реализую и все. Остается вопрос, что делать с работающим JavaScript.

Как обновить JavaScript динамически? Если обновляться динамически по примеру CSS, то будут ли возникать конфликты работы? Как выгрузится старый JS из памяти? Как оно будет происходить, ведь фактически я заменяю исполняемый код на лету. Вот такой список вопросов, к тем кто может быть знает.

ЗЫ: (UPD 2012.08.28 12:00)

В результате я очень странную проблему нашел. Я смог обновить тэг script, но потом я не смог его найти в дереве, очень странно, ведь я делал просто реплейс. В результате мое решение это перезапустить страницу на том же адресе, на котором до этого находился ajax скрипт. Немного не кошерно, но зато гарантировано и практически не мешает пользователю — так как он оказывается на той же странице на которую перешел при последнем ajax запросе.

Обновление стилей CSS я сделал двух этапной — от двух действий пользователя. На первом этапе происходит загрузка нового CSS, на втором этапе происходит удаление старого CSS, для оптимизации рендеринга. Таки образом (если использовать replace) экран не будет дергаться из-за ситуации, что старый CSS уже удален, а новый еще не подгрузился.

Источник

How can I force clients to refresh JavaScript files?

This tutorial teaches us to force clients to refresh JavaScript files.

Now, the question is, why do we need to force clients to refresh the JavaScript files? Let’s understand it by example issue. Suppose we have deployed the application and lots of users are using our application. Now, to improve the performance and UI of the application, we will continuously work on our application and upgrade its version after every period. Obviously, after upgrading our application’s version, we will also push that into production. But sometimes, on the user’s screen, client-side JavaScript or CSS is not upgraded, and it shows the old version of our application even if we have pushed new code to the production environment.

Can you think about why this issue happens? Well, continue to read to know the answer. When users open our application in the browser for the first time, the browser stores the cache for that webpage in the local storage. So, when a user visits the webpage the next time from the same browser, it doesn’t take too much time to load due to the stored cache. So, in our case, the stored cache creates the issue. We have upgraded the application’s code to the production environment, but the browser takes the CSS and JavaScript files from the local storage, or we can say cache. Rather than reloading the new file from the server, the browser loads from the cache and shows the user the older version of the application.

We have explained some solutions below to reload the JavaScript files from the server after upgrading the application.

Hard Reload the Browser

The easiest solution is the hard reload your browser. Users can hard reload their browser by pressing ctrl + F5 or ctrl + shift + R after opening the application window. On the Mac, users can press the cmd + R. It will reload all files from the server again, and if you have updated JavaScript files, it will replace the upgraded file in the local cache of the client’s browser.

Another way to hard reload the browser is that press ctrl and click on the reload button in the top left of the browser. The Mac users must press the cmd key and click on the reload button.

Yay! This solution works as you do a hard reload; it reloads all files from the server. But is it good to tell the application users to reload their browser hard whenever upgrading the application? It is not a good practice. So, we came up the another best solution below.

Change the File Path in a Script Tag

In this approach, we will change the source URL in the JavaScript script tag to make the browser fool and reload the whole all changed files from the server again. We simply add some query parameters after the source URL of the file.

Users can follow the below syntax to edit the source URL in the source tag.

Syntax

Parameters

• version − Users can add any string as a version to keep track of the new version. The most general way is to add whatever version, but users can also add date and time to make it unique.

Example

The below example demonstrates how to append the date and time dynamically whenever version upgrades of our application.

 type="text/javascript"> //get the date and time var currentDate = (new Date()).getTime(); //create new script element var newScriptElement = document.createElement("script"); newScriptElement.type = "text/javascript"; // add current date to URL as a query parameter newScriptElement.src = "script.js?" + currentDate; // append new script element to body. document.body.appendChild(newScriptElement); 

Users can see that we have appended the date and time with the script file source URL in the above example. When a browser tries to find the script file with the updated URL, it will fail to get it from the local cache. After, the browser must need to reload it from the server.

In addition, the user can achieve this by editing the .htaccess file −

RewriteEngine On RewriteBase / RewriteCond %REQUEST_URI> \.(bmp|png|gif|css|js)$ [NC] RewriteCond %QUERY_STRING> !^(.+?&v50|)v=50[^&]*(?:&(.*)|)$ [NC] RewriteRule ^ %REQUEST_URI>?v=50 [R=301,L]

In such a way, we can make browsers auto-reload the JavaScript files whenever we push updates of our application to production.

It is not good practice to tell users to hard reload and clear cache to see a new version of client-side applications. So, developers can use the second approach to make it auto-reload all updated files by just adding the query parameter to the file path.

Источник

Курсы javascript

далее рисую функции которые разбирают данные из этого скрипта и распихивают в нужные места.

Вопрос как не перегружая всей страницы обновлять только этот файл скрипта ? После этого обновляю необходимые места страницы (но это знаю как делать). То есть каким образом через JS загрузить файлик *.js чтобы использовать его содержимое ? Надеюсь понятно объяснил.

var s = document.createElement('SCRIPT'); s.type = 'text/javascript'; s.src = 'http://pics.rbc.ru/js/rbc_b_w.js'; document.body.appendChild(s);

var headID = document.getElementsByTagName("head")[0]; var s = document.createElement('SCRIPT'); s.type = 'text/javascript'; s.src = 'http://pics.rbc.ru/js/rbc_b_w.js'; headID.appendChild(s);

Но не суть . а как мне теперь вызвать перезагрузку этого s.src ?

хм . подпихнул в цикл не работает, ну работает наверно только не обновляет данные а тянет видимо из кеша. Сделал так

s.src = "http://deceit.narod.ru/rbc_b_w.js" + "?" + Math.random();

Заработало как надо. Вопрос , это нормальное решение ? И можно написать как чистить данные в DOM? К сожалению не силен в JS . так хобби.

setInterval(function() < if (arguments.callee.script) < arguments.callee.script.parentNode.removeChild(arguments.callee.script); >arguments.callee.script = document.createElement("SCRIPT"); arguments.callee.script.src = "http://deceit.narod.ru/rbc_b_w.js" + "?" + Math.random(); arguments.callee.script.type = "text/javascript"; document.getElementsByTagName("head")[0].appendChild(arguments.callee.script); >, 5000);

Спасибо , тоже вариант.
Есть мысль написать скрипт который будет выполняться в определенное время (обновлять данные с инета), например в 13-00, если соединение с инетом есть то загрузить данные и ждать следующих 13-00, если соединения в данный момент нет, то вывести текст с ошибкой подождать заданный интервал и пробовать снова и т.д.

Если у кого-нибудь есть немного времени и мысли как это можно организовать, буду очень благодарен за помощь. Ученье — свет

Источник