Safari seems to cache the page and the DOM state - javascript

I've written a Greasemonkey javascript that works fine in NinjaKit the new Safari userscript manager, but when I try and compile the same script using the Safari 5 extension builder I get some very weird behavior.
The script gives the user an options editing screen, when you click the save button, the script saves the users preferences as a JSON packet via the HTML5 localstorage API, the script then closes the options screen and reloads the page, on the page reload, the script should reload the preferences from the JSON in localstorage, and the script should act on the new preferences to display the page the way the user wants it according to the settings they made.
The problem I am seeing is when I run it as an extension, when I click the save button, the script reloads the page, but when the page is reloaded the changes the user made to the settings do not get applied to the page. the weird part is, if I then manually reload the page again via the browsers refresh button, the changes the user made in the settings do all of a sudden become apparent. so obviously the data has been saved to the localstorage, but for some reason when the page reloads for the first time, it's somehow being reloaded from a cached file, and only on the second manual reload, is the new page displayed correctly. I can't understand why this works as a plain userscript in ninjakit, and also actually works in Firefox, Opera and Google chrome, it just wont work as an extension in safari, its soooo annoying. I've tried lots of ways to make sure that Safari 5 doesn't reload a cached page, e.g adding extra parameters to the URL, but I just can't get it to work, without having to reload the page twice.
BTW I'm not using the native safari extension settings system as I want the script to be cross browser compatible, so that's why I'm saving the settings to localstorage.
Has anyone else witnessed this behavior? Or got any clues how to fix this? It's driving me mental...

i managed to solve the problem though i didnt figure out exactly what was causing it.
i got the script working by adding it as an "end script" rather than a "start script" in the extension builder, it all seems to work fine now. phew!

Related

Safari PHP session in iframe doesn't work (2019)

I know this question was asked before, but I couldn't find an adequate solution that still works.
I have a little plugin, that consists of an iframe that has another iframe inside it. This structure makes sense since the first iframe only contains some text + button clicking on which opens the second iframe with the actual website (couple interconnected webpages)
It works pretty well on every browser except safari. On safari the actual website doesn't seem to be able to keep the session and on every request/page load it treats you as a completely new visitor.
What makes it weirder is that safari sometimes working just fine. For example I installed this plugin on 3 websites and 1 of them is actually working.
I know that safari just acts weirdly when it comes to session within an iframe, so I really wanted to see if this problem was already solved or is it still a huge issue for people who develop plugins similar to mine
I have the same issue. The iframe needs to be loaded as the parent page and save a cookie. Then the iframe will function as expected. Safari drops all cookies from a different domain in an iframe.
You can test this... clear your history and try a webpage that has the iframe (different domains for parent and iframe)... then load the iframe directly as a the parent page and use it... then go back to the original site and the iframe will work as expected.
I have found other applications that generate an iframe by JavaScript and the iframe keeps the data stored somehow with cookies.

Chrome disables buttons and input elements when offline

I am working on a progressive web app and it has a file input button to choose a file from the device storage. It works fine offline on chrome desktop version but the android version disables the button. I have no idea how to fix this. There are no css in the project for now just the html and the javascript code for the service worker.
I figured out what was going on with my own page -- somehow every time I hit the app in the home screen, it would go to the saved offline page from Chrome instead of trying to actually use my PWA, and those saved offline pages have their inputs disabled.
I had to go delete the saved web page from Chrome to get mine to work again.
I only noticed because I changed some text around and nothing was correctly updated.
Your seems code is ok. So it might be the set up of the sys.
check the google tutorial
https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/?hl=en#download_the_code

Should JavaScript/jQuery objects disappear when download hyperlink is clicked

We use Atalasoft's web image viewing SDK to display TIF images in a web page. We recently upgraded to their client-side, JavaScript/jQuery based component and discovered some odd behavior. After initializing the control, if a link is clicked to a resource that should be downloaded, the control(s) clear themselves out. The issue exists in Chrome and IE 11 that I have tested.
Since it is a paid SDK, the easiest way to test this is to go to their demo at:
http://www.atalasoft.com/demos/dotimagewebdemo/
Once the page finishes loading, open a developer console and paste in the following (simply adds a download link to a file on their site):
$("body").append($("<div style='position:absolute;right:5px;top:5px;'><a href='/Gallery/WebViewingDemo.zip'>DOWNLOAD</a></div>"))
Clicking the download link will wipe out their controls on the page.
Adding download to the anchor tag resolves the issue in Chrome, but not IE.
Adding target='_blank' resolves the issue in both, but creates an ugly blank window first (that in my experience does not always close).
I am setting headers server-side to tell the browser to download the file rather than displaying it.
I guess my questions are two-fold:
Is it normal for JavaScript/jQuery based objects to disappear/destroy/whatever when a link is clicked to download a file or is this a problem with their implementation?
and
What is the best solution for this (preferably without the blank page showing up)? We need to support mainly Chrome, FF, and IE (most popular desktop versions).
Thanks in advance!

Forcing(version 10) Firefox Reload

I googled
Firefox Force Reload and read / scanned the first 4 hits.
All say to use either Control R or Control F5. Neither of these work for me. The only way I I have been able to force a reload (of my javascript) is by re-starting.
I pull in 3 files CSS, HTM, and JS all by Ajax Post. Oddly, the CSS and HTM reload but the .js is cached.
It's looks like the browser is checking file extensions of ajax posts and auto caching .js despite the reload method.
Is there a way to force a reload of .js. I just double checked the above solutions and they do not work.
Furthermore, What is the mechanism that let's Firefox know when to cache and when to download?
What I normally do is disable the caches built into firefox. Then all you have to do is refresh the page no special key strokes required. To do this in your url bar enter about:config then find the settings browser.cache.disk.enable and browser.cache.memory.enable set them both to false and restart. Problem solved forever.
To force reload, press Control + Shift + R. This will empty the cache and reload all page elements.
Open the javascript file in its own tab and control+F5 on that page. Then reload the page that uses the javascript file. That worked for me when all other methods failed.

What's the difference between F5 and Ctrl-F5 in Firefox related to JavaScript events?

When you try this public page: http://slim.nl/shop/default.aspx (update: meanwhile this site has changed such that this question's behavior cannot be tested anymore there), you'll notice a menubar. If you hit F5, the menu in that bar disappears. Same when you come to that page via the Back-button in your browser. It only happens on Firefox (seen on versions 3-7). Using Ctrl-F5, the menubar reappears.
To the best of my knowledge, all JavaScript events that fire when loading a page, including any AJAX cycles, should also fire when refreshing a page with F5 or coming there via the Back-button. What's happening here?
I'd like to know from a programmer's standpoint what the difference is between F5 and Ctrl-F5, preferably more general than just this case. Unless it's a bug in Firefox, of course.
Ctrl+F5 clears the cached files in browsers where as F5 just refreshes the page but it uses cached files. Eg say you load a page make changes to a css file and upload it press refresh or F5. Page just refreshes and doesn't fetch the new revised css file hit ctrl+F5 it goes it clears the cache for the page and fetches the file again from the server. This would then load the new css file which would display the changes.
Firefox caches not only loaded files but changes made to page( user input and even changes to attributes made by JavaScript). Check this. So if your menu depends on some attributes you can just hard-refresh by clicking CTRL+F5.
ctrl+F5 will just force the cache to be ignored. Perhaps you have a subtle asynchronous-programming bug that is only surfaces when you have a faster page load (due to using the cache).
That issue was fixed by rolling-back \js\dnn.controls.dnnmenu.js file to previous version. Not sure what was wrong there(didn't have time to debug), but anyway now it works:)

Categories

Resources