I am trying to use Google Chrome Frame in my Django app.
Inserting <meta http-equiv="X-UA-Compatible" content="chrome=1"> into the header doesn't do the trick.
Right now, this is what my header looks like:
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>Amuse Me</title>
<link href='/static/style.css' rel='stylesheet' type='text/css' />
<script type="text/javascript" src="/static/jquery-1.6.0.min.js"></script>
<script type="text/javascript" src="/static/base.js"></script>
</head>
Any suggestions?
Your page might be cached as suggested in quirksblog:
Cache
When I was doing research I used one
test page and constantly changed the
tags in the . The problem
was that IE/Frame seemed to be caching
not only the page, but also in which
rendering engine it should be shown.
Therefore a simple page refresh won’t
help you here.
Fortunately Twitter user jdalton came
up with a solution: simply append a
pseudo-query such as ?123 to the page
URL. That bypasses the cache and
forces the browser to re-evaluate the
tags.
Open your code in Google Chrome's developer tools and look for html errors, and check your resource headers.
Related
I don't have a direct access to the code itself right now, But I've got some client whose website was developed in angularjs, and all the code gives an output on the DOM (I can see the pages with all the elements and everything is loaded just fine), but when I tried to make a crawling test via Google - it looked like the website wasn't scanned yet, even though it's been already a month.. and then I saw something weird - that when I 'view source' the pages themselves, all I get is this piece of code -
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="ahrefs-site-verification" content="xxxyyy">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#1976d2">
<link rel="stylesheet" href="styles.32f34f185b7564580e93.css"></head>
<body>
<app-root></app-root>
<noscript>Please enable JavaScript to continue using this application.</noscript>
<script type="text/javascript" src="runtime.34e0ced836cdde276d53.js"></script><script type="text/javascript" src="polyfills.700c13e3feb6da6eca5f.js"></script><script type="text/javascript" src="main.e89588fe3aa7c32000ef.js"></script></body>
<script src="https://wchat.freshchat.com/js/widget.js" async=""></script>
</html>
I guess the problem is happening in these lines -
<app-root></app-root>
<noscript>Please enable JavaScript to continue using this application.</noscript>
Do you have at least any speculation why this might happen?
Since you're dealing with a SPA, SEO is not that straightforward. Google crawls your index.html which contains the app-root of your Angular app and my experience is that it will not execute the JS which contains your SPA routes. Your only options for optimizing SEO in SPA's is prerendering your routes, through an external service like Prerender.io or create your own prerender or use a Server Side Rendering technology for your SPA.
Since you are using Angular you should take a look at Angular Universal.
edit: if you don't want the complete hassle of prerendering all your routes but just want an acceptable result in Google for your index.html at least set a proper title tag <title>Proper Title - Wonderful website</title> and the meta description tag <meta name="description" content="Description of max 160 chars">
You might try Inspect Element instead of View Source
I don't know whether the project has been deployed in dev mode or production mode but doing an Inspect element will help you to access the DOM elements.
You can check this article to understand the difference between view source and Inspect Element
I am trying to use the jQuery .load() function to load a partial (in this case the navbar) into a specific div (using the id I've given it as the target). While developing the site I am building I have been using Gulp, and the way I have set it up works great. The header loads and works correctly, no problem. Where I am running into an issue is if I try to load the files locally without running Gulp. Most of the elements, CSS, JS executes without issue, and the jQuery CDN is loading fine according to the developer tools network tab, but the html file that contains the Navbar partial that I am trying to pass into the .load() function is nowhere to be found. I've tried changing the placement of the specific script tags, changing the name of the file, etc, but nothing seems to work. `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>STHR | NEWS</title>
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="./css/main.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(function(){
$('#header').load('../_header.html');
$('#footer').load('../_footer.html');
});
</script>
</head>
<body>
<div id="header"></div>`
I am getting these two errors in the console:
bootstrap.min.js:6 Uncaught Error: Bootstrap's JavaScript requires jQuery(anonymous function) # bootstrap.min.js:6
jquery.min.js:4 XMLHttpRequest cannot load file:///Users/andrewpohl/personal_websites/STHR/_header.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
UPDATE: I did some further research into the error about the XMLHttpRequest, and apparently this becomes an issue if you're not running your files through a local server. I was unaware of this issue and was just opening up my files via the command line straight to the browser, without setting up a simple server. Once I started using a simple Python server I noticed that the header began to load without the use of gulp.
use ready function to this
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#header").load("");
jQuery("#footer").load("");
});
</script>
$(function(){
$('#header').load('../_header.html');
}
You have to tell JQuery to wait for the DOM to be loaded before you can act on it. At the end of the <head> tag, there's still no #header loaded in the DOM.
I am very new to using Intel's XDK, I already have a web app that I need to convert to an android app. I have tested the html web app thoroughly and so far, it works perfectly in the browser. The problem is that when I imported it to the XDK, it doesn't seem to work on the emulators. I searched everywhere and no one else seems to have the same problem, so it must be I'm missing something. I know you have to insert an extra javascript (which I already did) but so far, it still doesn't work. Can anybody here point me to the right direction? Thank you in advance.
My code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width target-densitydpi=device-dpi initial- scale=0.1 maximum-scale=0.5 user-scalable=0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge" />
<title>King</title>
<style>
html {
height:100%;
}
body {
background-color: #000000;
margin:0;
height:100%;
}
</style>
<meta name="viewport" content="user-scalable=yes, width=1024" />
<script src='intelxdk.js'></script>
<script type="text/javascript">
/* Intel native bridge is available */
var onDeviceReady=function(){
//hide splash screen
intel.xdk.device.hideSplashScreen();
};
document.addEventListener("intel.xdk.device.ready",onDeviceReady,false);
</script>
</head>
<body>
<div style ="margin:auto;width:1024px;height:768px">
<div id="king_hype_container" style="position:relative;overflow:hidden;width:1024px;height:768px;">
<script type="text/javascript" charset="utf-8" src="King.hyperesources/king_hype_generated_script.js?7046"></script>
</div>
</div>
</body>
</html>
Maybe I'm putting the intel xdk in the wrong place in javascript?
Do what #rscohn2 suggests (make that "king" script is local to your project, avoid loading it over the network if at all possible), but also take a look at this "beefier" template which I've provided to people who are trying to turn a web app into a webview app. There are lots of comments and console.log messages to help you figure out what's going on, but, in essence:
wait for the custom "app.Ready" event to kick off your app
consider when you are loading your third-party and custom JS scripts (see the README)
It probably isn't loading the king_hype_generated_script.js. You could see that by popping up the debugger in the emulator. You can do that by clicking on the bug icon in the top left of the screen and then looking at the messages in the console tab. you probably want to make king_hype_generate_script.js a static file and copy into your project, or use an absolute URL pointing back at your server. Copying it into your project will give you better ability to work offline.
I had a great working PhoneGap mobile web-app project, then my laptop died. I had all the files saved to the cloud, so no trouble with code loss, but now I've been trying to rebuild the project and that's where the trouble is.
I've set the whole thing up again, and it's loading alright, all the html elements are there as coded, but the jQuery Mobile css doesn't seem to be including on any of my pages, given that all I see is a white page with normal underlined blue links. Very unattractive.
Here's the beginning of my code on each page:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
Which should be alright, I would think...it worked before, anyway.
What's missing? I'm inclined to think it's somewhere in the configuration rather than the code, give the circumstances.
Should there be some sort of cordova.css file? Because there isn't one, and I thought there used to be. (About to Google that...)
Have you checked that code.jquery.com is in ExternalHosts in your phonegap.plist (or cordova.plist)?
Please try whit this,
https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.0/jquery.mobile-1.1.0.min.css
Hope this helps. :)
I'm having a bizarre situation here where my external site files, both JavaScript and CSS, are being interpretted as somehow corrupt on Safari browsers. The same site looks fine in Internet Explorer, but on Safari the javascript and css are being completely ignored. If I look at the files through the Inspector, I can see that Safari views these files as containing junk characters -- either asian symbols or square boxes. When I navigate directly to the files, however, they appear just fine. See the site below, viewed in Safari 5, for an example:
http://amsoell.com/dch/castlemoore
If I embed the same exact CSS or JavaScript into the HTML itself, it renders perfectly. I don't know if this is a server issue or something in my CSS, but I'm at my wits end here.
I checked your website for validation and it's not valid. But the most interesting thing is that your enconding is utf-16le. You should put your encoding to utf-8. Just put the following line in your <head> section:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
Include the charset="utf-8" parameter in your <script> and <link> tags:
<script type="text/javascript" charset="utf-8" src="script.js"></script>
<link rel="stylesheet" type="text/css" charset="utf-8" href="style.css">
The problem can be solved by saving the html page in "Windows-1252 Encoding".