Here is a screenshot
Here is the code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.4/united/bootstrap.min.css">
<link rel="stylesheet" href="../../style.css?v=3">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz|Open+Sans+Condensed:300|Russo+One">
<script src="https://code.jquery.com/jquery-2.0.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.6.0/jquery.nicescroll.min.js"></script>
I am not including these files anywhere else. I am using cloudflare. JavaScript files load only once. The issue is only with stylesheets.
There are a few things I would check:
This may be an issue with the tool you are using to view network
traffic, not the actual webpage. Try an alternative tool such as
FireBug. To view the naked HTTP requests use Fiddler2.
Does your webpage use Frame/IFrame? If so, each frame is will make
an independent set of HTTP requests.
To remove all doubt, I would personally restart your computer. The number of times I see 'weird' tool behaviour that vanishes on a restart is astonishing.
CloudFlare wouldn't be adding additional stylesheets to your site. It looks like those resources are coming via Google and MaxCDN.
Related
I have included the Bootstrap cdn links for using in HTML web-Resource code for CRM development. I have designed a HTML page using those Bootstrap functionalities. As a html page outside CRM it was working fine but when I added it to CRM Page as HTML web resource what it was displaying is a basic html page without css and javascript features.
How can I solve this?
I never used CDN source in my CRM web resource developments. Always have a local copy uploaded in CRM as web resource to refer in HTML pages and checked into Azure DevOps as well. I never faced any issues in this approach. I remember CDN url broke like you said when I tried last time.
Just sharing the url paths from <head> section that I'm using in one of my HTML web resource.
<script src="mts_jquery/2.1.4/jquery.min.js"></script>
<script src="mts_typeahead.bundle.js"></script>
<script src="mts_bootstrap/3.3.5/bootstrap.min.js"></script>
<link href="mts_bootstrap/3.3.5/bootstrap.min.css" rel="stylesheet" />
<link href="mts_bootstrap/3.3.5/bootstrap-theme.min.css" rel="stylesheet" />
<script src="mts_bootstrap-tagsinput.js"></script>
<link href="mts_bootstrap-tagsinput.css" rel="stylesheet" />
I have an Angular JS app that Im running a production environment and make deployments that include new features on a fairly regular basis.
My app has a sizable number of returning users and since the app is essentially just a JS file, the JS running on their device is often a cached version. Sometimes this is a problem because the new features may not be backwards compatible.
One method I'm aware of to force browsers to download a fresh version of a resource is to place random URL parameters in the src.
<link rel="stylesheet" type="text/css" href="theme.css"> <!-- cached -->
<link rel="stylesheet" type="text/css" href="theme.css?8f834giywe"> <!-- uncached -->
But for some reason, this doesnt work in my angular app.
<script src="./app/js/app.min.js"></script> <!-- cached -->
<script src="./app/js/app.min.js?43gt4gf342"></script> <!-- broken -->
The app loads (not a server-level issue) but immediately breaks.
Can anyone think of any reason why this would not work?
Any there any other options to force a client to download a fresh copy or a resource rather than using a cached version?
Try adding to the Header section of the HTML the following line:
<meta http-equiv="CACHE-CONTROL" content="NO-CACHE">
This worked for me without the need to play with URLs.
I can't link my CSS or other files to my HTML. I always get the error:
Failed to load resource: net::ERR_FILE_NOT_FOUND
And the strange thing is it works on the computer of my project partner. How is that possible? We have the same code.
This is the part of my code:
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/custom.css" rel="stylesheet">
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/register.js"></script>
<script src="/js/login.js"></script>
It's very difficult to know without seeing your directory structure. But it seems likely that removing the leading / from your file path will solve the issue. I'm willing to bet that you're unintentionally referencing an absolute path instead of a relative one.
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/register.js"></script>
<script src="js/login.js"></script>
The leading slash tells that you want to link the files from a root. If you were viewing this page on e.g. http://www.example.com the files will be linked from http://www.example.com/css/bootstrap.min.css, even if your current page is http://www.example.com/folder/folder/page.html.
Since you're only using Windows without webserver, the root is C://. A solution would be to use relative paths instead of absolute paths.
For example:
<link href="css/bootstrap.min.css" rel="stylesheet">
In the previous example the file you link (with relative paths) will be in http://www.example.com/folder/folder/css/bootstrap.min.css if your current page is http://www.example.com/folder/folder/page.html.
Your URLs use absolute paths (i.e. they start with /) which makes them relative to the root of the website.
This is excellent when you want to write links that:
Work anywhere on the website, even if the HTML is shared between pages with different numbers of / in the path segments as your main navigation is likely to be
Work in both a development environment and a production environment
In this case it is failing because your development environment doesn't involve a web server.
You are loading the files into the browser directly from your local hard disk without going through an HTTP server. This makes the root of your website be the root of your hard disk (instead of the folder you are keeping the files in).
The solution: Install an HTTP server and tell your browser to fetch the files from http://localhost.
This will provide other benefits, such as being able to test Ajax code in your development environment.
"Do you want to view the webpage content that was delivered securely...."
Is this message displayed only because http resources are used in a https resource?
Yes. Usually this is static content, such as image, CSS, and JS files.
It is best to avoid mixing content sources on HTTPS pages, as it will cause these sorts of warnings, and can lead to some of your content not displaying to the end-user.
As you said in your question, it's because of the mixing of both http and https content.
If you are using Firefox you could go and install the Firebug addon to look up all resources that are loaded and then use only one source. You'll find all loaded content under tab 'Net' after you do a reload.
That's correct. It's unsecure to request HTTP resources from a HTTPS page. You need to replace all absolute URLs to resources by scheme relative URLs.
E.g.
<link rel="stylesheet" href="http://example.com/resources/style.css" />
<script src="http://example.com/resources/script.js"></script>
<img src="http://example.com/resources/image.png" />
must be
<link rel="stylesheet" href="//example.com/resources/style.css" />
<script src="//example.com/resources/script.js"></script>
<img src="//example.com/resources/image.png" />
See also:
What are those URL's that are starting with // - that you can see within Google+ html source?
I have applications that run within the browser. When I make changes to pages and javascript I start getting calls from users who get weird results. I tell them to clear their cache and all is well.
Is there a way that I can force, or suggest to, the browser to get a new version of the page?
thanks
You can set a Cache-Control: no-cache header on the server-side to prevent the browser from caching your files.
Edit:
See this page for info on stopping caching of pages:
http://www.webmasterworld.com/forum21/10628.htm
See suggestions for .js/.css on this answer:
How to force browser to reload cached CSS/JS files?
The idea is to timestamp filenames when they change, so the filename changes and the browser is forced to load a new copy.
So I think I found the perfect solution. I discovered that if you put a ? and some unique character after the file name, it forces the browser to get a new version when that version changes.
So instead of:
<link href="css/mycss.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./js/ngen.js"></script>
code:
<link href="css/mycss.css?1.0.28" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./js/ngen.js?1.0.28"></script>
and since I use php, I create a global with the release in my main config.php and tack that on to the file reference.
$GLOBALS['V_UNIQUE'] = "?1.0.28" // my current release number
<link href="css/mycss.css?1.0.28<?php echo $GLOBALS['V_UNIQUE']?>" rel="stylesheet" type="text/css" />