In Ionic project, I had loaded my Responsive Website URL in an iFrame and it looks fine. But there are few anchor links in my website which will open a new window, for eg :
Devices List
This is working fine for Desktop browsers, but the same is not opening any new window or not even opening in default browser. Am seeing this problem only with iFrame. I tried with Different targets and also used InAppBrowser, no progress.
Might be of help to someone blocked due to this
Devices List
This will get reference to parent container window object and will work as expected.
I made a button for a PDF download that is working well in Chrome but it doesn´t open in Mozilla.
This is the code I used:
<a target="_blank" href="http://gerster.com/docs/posamenten_neuheiten_2014_2.pdf">Jetzt PDF-Katalog herunterladen</a>
What could be wrong?
Note: No error is showing up.
Q Using window.open or "target=" such as blank it doesn´t open in ### Browser
What could be wrong?
It is up to each user to download or permit binary.PDF running in a browser viewport after download, this is especially true after download fron any non trusted site.
OOB many browsers assume they can sandbox the PDF download and then allow as default action review of the PDF file. Chromeium based browsers like Edge may be more inclined to use that before the user improves their security.
So the 1st task for a user should be to switch off Edge auto viewing of PDFs and switch to a more secure setting.
In that case Edge / Chrome and other browsers will NOT auto run the downloaded PDF but ask the user if they wish to View after Download or simply Download.
One of the possible values of that attribute is _blank, which tells the browser to open a new window (or tab, if that’s the user’s preference) when that link is clicked.
This used to be “invalid” in HTML
see A Bad Reason: The link is to a PDF
If you are going to do it, not only do you need the target attribute for the functionality, you need to rel attribute for security.
So do not open yourserver to security issues blacklist or pop-up blocking see https://mathiasbynens.github.io/rel-noopener/
Don’t use target=_blank (or any other target that opens a new navigation context), especially for links in user-generated content, unless you have a good reason
In Chrome for desktop I have options in the dev tools to disable cache completely when dev tools are opened and I have the options to manually do a hard reload when long clicking on the reload button (with dev tools open).
Is there any such technique for Chrome for Android? I didn't find any setting.
What can I do when I want to force the browser to download some javascript or css file instead of using a cached one when developing?
I'm using window.location.reload(true) according to MDN (and this similar question) it forces page to reload from server.
You can execute this code in the browser by typing javascript:location.reload(true) in the address bar.
Viewing the page in incognito mode will disable the cache. It was the only way I could force a refresh on a stylesheet without manually clearing the cache through the settings.
Also an option:
Menu
Settings
Privacy
Clear Browsing Data
Check "Cache" and press "CLEAR"
and then reload the page.
You can use the Request Desktop Site option from the app menu (to the right of the address bar) which will force the page to reload.
Simply tap it, wait for the refresh, then deselect it.
Mentioning this because you mentioned "when developing".
You can control the mobile device via your Chrome Desktop Browser.
Visit chrome://inspect/#devices on your desktop. And Inspect the device that's connected to your desktop. Agree when asked for permission.
You should now see a full fledged Devtool window for the current page on mobile device.
Now, Use the hard reload shortcut (Cmd+Shift+R) on desktop to do hard reload on mobile device!
How to reset all data for a given URL / Website on Chrome Mobile for android:
1 - Open the Chrome menu, and tap on the "i (info)" icon
2 - tap "Site settings"
3 - Tap the trashcan icon
That's it, even the most deeply ensconsed service worker for that URL will now die.
Don't forget to make sure that the "Reduce data usage" setting is turned OFF, as it seems to download cached data (from Google servers?) even though your local cache is flushed.
I know this is an old question, but I found that the accepted answer didn't work for me.
An alternate solution would be to append the url with a new url parameter
such as website.com?a=1, website.com?a=2, etc.
If you have parameters already, of course, you would use an ampersand
i.e. website.com?q=test&a=1
As of 2018, from google help center (tested on Chrome 63) :
tap on the three dots menu ;
choose History > Clear browsing data ;
if needed, choose the time period (above the checklist) ;
uncheck all items but Cached images and files ;
proceed with Clear data and confirm.
As mentioned in another answer, incognito tabs are also of great use for development.
I found a solution that works, but it's ugly.
Connect the Android device to your PC with a USB cable and open Chrome on your desktop.
Right-click anywhere on a page and select "Inspect".
Click the three-dot menu and select "Remote devices" under the "More tools" menu:
In the panel that opens, select your device and then the "Inspect" button next to the name of the tab on your phone that needs to be refreshed:
In the window that opens, click the "Network" tab and check the "Disable cache" checkbox:
Reload the page on your phone or using the reload button in the DevTools window.
Note: if your phone doesn't appear in the device list:
make sure the USB connection is using File Transfer mode and isn't simply charging
try restarting ADB or run adb devices to see if the device is being detected
The only reliable way I've found that doesn't require plugging the phone in to a PC is as follows:
1. Force stop the Chrome app.
This must be done first, and you cannot re-open Chrome until you finish these steps. There are several ways to force stop. Most home launchers will let you get to "App info" by holding down your finger on the chrome icon and selecting an "i" icon. Alternately, you may be able to go to Android settings and simply search for "Chrome".
Once in "App info", select "Force stop" as shown below:
2. Clear Chrome's cache
Select "Storage" from the same screen:
Finally, select "Clear cache".
When you return to the Chrome app, the page should reload itself and serve a non-cached version.
Additionally, I found a site that makes it easy to test if you've cleared your cache: https://refreshyourcache.com/en/cache-test/
I am in no way affiliated with it. Note that the method to clear the cache mentioned on that site is in fact outdated and no longer valid.
Keyboard shortcuts such as Ctrl+Shift+R work on Android too, you just need a keyboard capable of sending these keys. I used Hacker's Keyboard
to send Ctrl+Shift+R, which did a hard reload on my phone.
Recent versions of Chrome cache very aggressively. Even cache-busting techniques such as "http://url?updated=datecode" stopped working. You must clear the cache or launch an incognito window every time (and make sure data-saver is off).
Remote Debugging allows you to use the desktop dev-tools:
https://developers.google.com/chrome-developer-tools/docs/remote-debugging
If its just the matter of included files, just add version after the path (?v=12345678)
<link rel="stylesheet" type="text/css" href="style.css?v=12345678" />
Whoever loads the page again will see changes.
Most of the answers were not working for me.
Here is a super simple working on my Galaxy S8 in august 2020:
Add "view-source:" just before your http:.... address, navigate trough there to the changed file if different than the html or index.
You will see the unchanged file. Refresh.
Done.
EDIT: This method has been deprecated in Google Chrome and will no longer work.
ORIGINAL ANSWER:
I was able to clear the cache (including subsequent xhr) using chrome://net-internals
Then click the little arrow in the top right
Select "clear cache" from that menu.
Here is another simple solution that may work when others fail:
Today, a fairly simple developer-side solution worked for me when the caching problem was a cached CSS file. In short: Create a temporary html file copy and browse to it to update the CSS cache.
This trick can refresh the CSS file, at least in Android's blue-globe-iconed default browser (but quite likely its twin, the official Chrome browser, too, and whatever other browsers we encounter on "smart"phones with their trend of aggressive caching).
Details:
At first I tried some of the fairly simple solutions shared here, but without success (for example clearing the recent history of the specific site, but not months and months of it). My latest CSS would however not be applied apon refresh. And that even though I had already employed the version-number-trick in the CSS file-call in the head section of the html which had helped me avoid these pesky aggressive cachings in the past. (example: link rel="stylesheet" href="style.css?v=001" where you upgrade this pseudo-version number every time you make a change to a CSS file, e.g. 001, 002, 003, 004... (should be done in every html file of the site))
This time (August 2019) the CSS file version number update no longer sufficed, nor did some of the simpler measures mentioned here work for me, or I couldn't even find access to some of them (on a borrowed android phone).
In the end I tried something relatively simple that finally solved the problem:
I made a copy of the site's index.html file giving it a different name (indexcopy.html), uploaded it, browsed to it on the Android device, then browsed back to the original page, refreshed it (with the refresh button left of the address bar), and voilà: This time the refresh of index.html finally worked.
Explanation: The latest CSS file version was now finally applied on Android when refreshing the html page in question because the cached copy of the CSS file had now been updated when the CSS file was called from a differently named temporary html page that did not exist anywhere in the browser history and that I could delete again afterwards. The aggressive caching apparently ignored the CSS URL and went instead by the HTML URL, even though it was the CSS file that needed to be updated in the cache.
Adding a parameter to url fool browser to load a new page. I wrote a fuction for that purpose:
function forceReload(){
function setUrlParams(url, key, value) {
url = url.split('?');
usp = new URLSearchParams(url[1]);
usp.set(key, value);
url[1] = usp.toString();
return url.join('?');
}
window.location.href =setUrlParams(window.location.href,'_t',Date.now());
}
And you just need to call it:
forceReload();
I've struggled with this for a CSS file that wouldn't refresh. But you can type the name of the CSS file itself into the address bar and refresh that. After that it's fine. Chrome on Android 8. Obviously that would be tiresome if you had more than a couple of files involved.
If that's an option, you can visit the (i.e. JavaScript) resource directly, reload a bunch of times, and that also triggers a hard reload for that resource. Then you can reload the actual page again.
Launch the Chrome Android app
Tap on the menu for more options.
Select Settings from the list of options.
Scroll down and tap on the Site Settings tab.
Within the Site Settings open the Data Stored tab.
Tap on the Site URL that you want to delete storage.
Hit on the Clear & reset command button.
refresh the website page.
there are few methods to force reload chrome on mobile device:
clear history (look above)
use remote debugging (look above)
request desktop site
disable "Lite mode"
open URL for .JS or .CSS then do normal reload.
In chrome,simply tick "Desktop site" and then remove tick!!
I would like to use apple-mobile-web-app-capable to allow a user to browse a website like a kiosk, without the navigation bar and the page fullscreen.
This works well until a link is clicked, then it opens Safari.
Is there any way to use this fullscreen mode and allow clicking of links without being taken to Safari?
I asked a similar question over on AskDifferent - Hiding URL Bar on iPad.
The answer I received there suggested distributing the web app's configuration file, which allows you to configure many more options. The end-user must agree to the profile installation, but having a controlled device will limit any frustration with this fact. The details of this were linked to in the above answer, but it appears to be broken now.
Alternatively, Chrome has a full screen browser mode that can be taken advantage of. Given a controlled device you could simply use the alternative browser.
What combination of html and IE8 settings get IE8 to open links in a new tab. Or can you not do this with IE8, and you only get the new tabs by manually selecting File-> new/duplicate tab?
My website works in Firefox - pages on the site load in the current tab, and links off site load a new tab. IE8 won't behave: target="_blank" opens a whole new window; the other options, _self _top _parent, all open the page in the current tab.
I have Firefox set to "Open new windows in a new tab." The links to pages on my site all have target="_self" and Firefox keeps these in the current tab. On the external links I don't have a target set (I added _blank to see if it fixed IE8, and doing that didn't affect Firefox).
I can't find an equivalent setting in IE8. Tools-Internet Options-General-Tabs/Settings has an enable tabs box, and a sub-option to automatically switch to newly opened tabs. Is there some html that will work? An IE8 setting I'm missing?
Any help appreciated.
It is not a thing you can control from HTML code, as it should be user's, not document author's decision how to open a link.
To open pop-up windows in new tab, follow instructions from IE8 help:
To change how pop-ups are displayed
In Internet Explorer, click the Tools
button, and then click Internet
Options. Click the General tab, and
then, in the Tabs section, click
Settings. Make a selection in the
When a pop-up is encountered section.
Click OK twice.
Updated:
Reading OPs comments to other posts, it seems like the intent is to make all external links open in new tabs. However, it is not document author's choice how the client should open any link in any page - it has to be decided by the client. Moreover, even though you can create a client-side script which sets "target" property to open pop-up windows, there is no notion of "tab" in Document Object Model and hence you cannot do it even in a script.
The answer to the question was posted in the comments (but is now deleted). Now you can test it in IE8 - just use the middle mouse button to open the link in a new tab. Firefox does work better with tabs.
How the browser interprets the target is browser dependent - each vendor will specify what they want. Firefox decided to use a new tab, IE decided to use a new window.
The html 4.01 spec has this to say on "_blank":
The user agent should load the designated document in a new, unnamed window.
The spec predates the wide usage tabbed browsing now has, so doesn't mention the concept anywhere.
Opening a page in a new tab is concept that believe is not covered by the html standard. The Firefox behavior is just a setting in the browser, which IE8 might or might not have.
On a related note, I personally find it abusive of websites to make the choice of opening a page in a new tab/window. What if I want it to open in the current tab/window?
Of course, in a rich application-like site that is basically entirely an application I find it convenient that pages open in a new tab/window. This makes them work more like desktop apps
For normal pages, I would suggest not setting the target at all and let the user decide.
I think W3.org is still working on this issue, but it isn't implemented in any browser yet. Also remember that Internet Explorer will be the last browser to implement it ;)
This is code copied from a W3 Working Draft:
/* If a user wanted to have new windows open in new tabs instead, she could use the following user style sheet to do so: */
* { target-new: tab ! important }
Of course, it is impossible to set user preference in HTML or Javascript -- it would be unsafe.