Nice programing

파일 변경시 Firefox 자동 새로 고침을하려면 어떻게해야합니까?

nicepro 2020. 11. 23. 20:01
반응형

파일 변경시 Firefox 자동 새로 고침을하려면 어떻게해야합니까?


누구든지 하나 이상의 로컬 파일을 모니터링 할 수있는 Firefox 용 확장, 스크립트 또는 기타 메커니즘을 알고 있습니까? Firefox는 파일 (들)에서 변경 (타임 스탬프)을 감지하면 자동으로 새로 고침하거나 캔버스를 업데이트합니다.

CSS 편집의 경우 전체 HTML을 다시 렌더링하는 대신 CSS 만 다시로드 할 수 있다면 이상적입니다.

효과적으로 그것은 외부 파일을 통해서만 동적 HTML / CSS 편집을 통해 Firebug와 유사한 동작을 가능하게합니다.


Live.js

웹 사이트에서 :

어떻게? Live.js 만 포함하면 연속적인 HEAD 요청을 서버에 전송하여 로컬 CSS 및 Javascript를 포함한 현재 페이지를 모니터링합니다. CSS 변경 사항은 동적으로 적용되고 HTML 또는 Javascript 변경 사항은 페이지를 다시로드합니다. 시도 해봐!

어디? Live.js는 달리 입증 될 때까지 Firefox, Chrome, Safari, Opera 및 IE6 +에서 작동합니다. Live.js는 Ruby, Handcraft, Python, Django, NET, Java, Php, Drupal, Joomla 또는 사용자가 사용하는 개발 프레임 워크 또는 언어와 무관합니다.

IETester 를 사용하여 열려있는 각 IE 탭을 동적으로 새로 고치는 큰 이점이 있습니다.

다음을 추가하여 사용해보십시오. <head>

<script type="text/javascript" src="http://livejs.com/live.js"></script>

자동 새로 고침은 로컬 파일 변경 사항을 모니터링하고 브라우저를 새로 고침하는 Firefox 용 확장입니다.

https://addons.mozilla.org/en-US/firefox/addon/auto-reload/


나는 livejs를 추천하고 싶지만

다음과 같은 장점단점이 있습니다.

장점 :
1. 손쉬운 설정
2. 다른 브라우저에서 원활하게 작동 (Live.js는 Firefox, Chrome, Safari, Opera 및 IE6 +에서 작동)
3. 특별히 디자인과 함께 디버그하려는 경우 브라우저 새로 고침을위한 성가신 간격을 추가하지 마십시오.
4 . 변경 사항을 저장할 때만 새로 고침 ctrl + S
5. 방화범으로부터 CSS 등을 직접 저장 합니다. 해당 기능을 사용하지 않았지만 해당 사이트 http://livejs.com/ 에서도 지원한다고 읽었 습니다 !!!

단점 :
1. 파일 프로토콜에서 작동하지 않습니다 file:///C:/Users/Admin/Desktop/livejs/live.html
. 2. 서버를 실행해야합니다. http://localhost
3. 스테이징 / 프로덕션에 배포하는 동안 제거해야합니다
. 4. CDN을 제공하지 않습니다. 부정 행위 및 직접 링크 적용을 시도했습니다. http://livejs.com/live.js 하지만 작동하지 않습니다. 작업을 위해 다운로드하고 로컬에 보관해야합니다.


방화범으로 Xrefresh합니다 .


페이지에 자바 스크립트 간격을 배치하고 CSS 파일의 마지막 수정 날짜를 확인하는 로컬 스크립트를 쿼리하고 변경된 경우 새로 고치도록 할 수 있습니다.

jQuery 예 :

var modTime = 0;
setInterval(function(){
  $.post("isModified.php", {"file":"main.css", "time":modTime}, function(rst) {
    if (rst.time != modTime) {
      modTime = rst.time;
      // reload style tag
      $("head link[rel='stylesheet']:eq(0)").remove();
      $("head").prepend($(document.createElement("link")).attr({
          "rel":"stylesheet",
          "href":"http://sstatic.net/mso/all.css?v=4372"
        })
      );
    }
  });
}, 5000);

Firefox에는 mozRepl이라는 확장이 있습니다.

Emacs는 moz-reload-on-save-mode를 사용하여 여기에 연결할 수 있습니다.

설정시 파일을 저장하면 브라우저 창을 강제로 새로 고칩니다.


There are some IDE's that contain this ability (They'll have a pane within them or some other means to auto-refresh a page on save).

If you want to do this yourself a quick hack is to set the meta refresh on the page to a low value - one or two seconds.

# Will refresh the page content every second
<meta http-equiv="refresh" content="1" />

Browsersync can do this from the server side / outside of the browser.

This can achieve more repeatable results / things that don't require so much clicking.

This will serve a page and refresh on change

cd static_content
browser-sync start --server --files .

It also allows a scripting mode.


Have a look at FileWatcher extension: https://addons.mozilla.org/en-US/firefox/addon/filewatcher/

  • it's a WebExtension, so it works with the latest Firefox
  • it has a native app (to be installed locally) that monitors watched files for changes using native OS calls (no polling!) and notifies the WebExtension to let it reload the web page
  • reload is driven by rules: a rule contains the page URL (with regular expression support) and its included/excluded local source files
  • open source: https://github.com/coolsoft-ita/filewatcher

DISCLAIMER: I'm the author of the extension ;)


I think that you can solve it by using some ajax requests after a determinate interval. You can do a request to CSS files and then if you don't get the "not modified" header you delete your css and load it again. For dynamic files you do a request and store the response and then every time you make a request to that file you compare the response to the latest.

참고URL : https://stackoverflow.com/questions/1346716/how-do-i-make-firefox-auto-refresh-on-file-change

반응형