I'm trying to use maps api (yandex but I have seen similar problem in google maps too) and include its script in head:
<!DOCTYPE html>
<html lang="en">
<head>
<title>site</title>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/postscribe/2.0.8/postscribe.min.js">
<script async src="https://api-maps.yandex.ru/1.1/index.xml" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function () {
var map = new YMaps.Map(document.getElementById("YMapsID"));
map.setCenter(new YMaps.GeoPoint(59.938518, 30.323342), 10);
};
</script>
</head>
Here is body:
<body>
<div class="map-block_map-item">
<div id="YMapsID" style="width:100%;height:100%">
</div>
</div>
</body>
But when page downloads I get this warning:
"It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened."
If I don't use async attribute get this message:
A parser-blocking, cross site (i.e. different eTLD+1) script, https://api-maps.yandex.ru/1.1/_YMaps.js?v=1.1.21-58, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message. See https://www.chromestatus.com/feature/5718547946799104 for more details
How can I solve this problem? As I understood it happens on very slow connections (but I have rather fast connection so why?) and it cause block document.written scripts. (I'm new in js so yes I have google it but didn't understand how it can be improve besides async script download)
Related
I'm trying to make use of Google's Core Reporting API. I got it working with the demo they give you. But now I want to take the code and put it within my own code.
I use AngularJS and PHP mainly. I try it to keep it as basic as possible, the only thing I changed is that I use partial views instead of whole HTML pages.
This is the partial view as I have it right now:
<button id="auth-button" hidden>Authorize</button>
<h1>Hello Analytics</h1>
<script type="text/javascript" src="../js/plugins/analytics.js"></script>
<script type="text/javascript" src="https://apis.google.com/js/client.js? onload=authorize"></script>
This is the demo Google gives to give an idea of how the API works:
<html>
<head>
<meta charset="utf-8">
<title>Hello Analytics - A quickstart guide for JavaScript</title>
</head>
<body>
<button id="auth-button" hidden>Authorize</button>
<h1>Hello Analytics</h1>
<div id="query-output"></div>
<!-- <textarea cols="80" rows="20" id="query-output"></textarea> -->
<script src="js/analytics.js"></script>
<script src="https://apis.google.com/js/client.js?onload=authorize"></script>
</body>
</html>
It takes a while for the page to load, and when it does, it only shows the text "Hello Analytics". When I inspect the page it gives an "Uncaught SyntaxError: Unexpected token <" error. With no further information of where exactly the error occured.
Does anybody know what causes this?
That error typically means that you are trying to load a JavaScript program but the server is delivering an HTML document instead.
Check the Network tab in your developer tools. Look at the responses you are getting. Find one that gives you an HTML document when you want a JavaScript program.
It's probably caused by you putting the wrong URL somewhere.
I am in a situation where I am maintaining a page of opening hours that sometimes change. The page is used on several different platforms:
An external CMS system on http Danish and English
A Sharepoint intranet on https in Danish and English
In order to not have to change 4 different pages each time the opening hours change, I am loading the opening hours from a single javascript file which I have located on another server.
The script is here: https://blanketter.science.ku.dk/studenterservice/studenterservice-content.js
I am loading the page using the below code below:
<html>
<head>
<title></title>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
<link rel="stylesheet" type="text/css" href="https://blanketter.science.ku.dk/studenterservice/studenterservice.css">
<script type="text/javascript" src="https://blanketter.science.ku.dk/studenterservice/studenterservice-content.js"></script>
</head>
<body>
<div id="dynamic-intro">Error message if JavaScript disabled or Firefox used.</div>
<div id="dynamic-specialOpeningHours">Error message if JavaScript disabled or Firefox used.</div>
<div id="dynamic-contact">Error message if JavaScript disabled or Firefox used.</div>
<div id="dynamic-closedWeeks">Error message if JavaScript disabled or Firefox used.</div>
<div id="dynamic-directions">Error message if JavaScript disabled or Firefox used.</div>
<script language="JavaScript" type="text/javascript">
document.getElementById('content').className = "subpage wide";
</script>
<script type="text/javascript">
writePageByLanguage('danish');
</script>
</body>
</html>
You can see an example of this at http://www.science.ku.dk/uddannelser/studenterservice/vejledning_kopi/.
The site works as it should in Chrome and Internet Explorer/Edge, but Firefox fails to load the .js file and displays the eror message instead.
I have tried to place the .js file on a http:// server instead (different hosting provider). In this case Firefox is able to display the content.
Any help in clearing up how I could possible fix this while still having the .js file on my https server would be much appreciated.
From the Firefox Network tab:
blanketter.science.ku.dk uses an invalid security certificate.
The certificate is not trusted because the issuer certificate is
unknown. The server might not be sending the appropriate intermediate
certificates. An additional root certificate may need to be imported.
(Error code: sec_error_unknown_issuer)
You either need to get everyone visiting the site to manually trust the certificate, or get a new certificate that is signed by an authority that Firefox trusts, or fix the configuration of the server to provide the intermediate certificates.
Given an url (e.g. localhost:8000), how can a script find what resources will a browser load (via HTTP requests)?
For example, let's suppose that the / route responds with:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
some content
<img src="/foo.png" alt="">
</body>
</html>
The resources which will be loaded are:
/css/style.css
foo.png
This is simple (just a dom iteration with via cheerio or so), but it's not so native I think it should.
An iteration in the response HTML will not work for the additional CSS #imports and background-image and so on.
What is the native way to get the list with the CSS, images and maybe other resources which are loaded by the browser?
Maybe is it possible via jsdom?
Like #adeneo suggested, the missing keywords were headless browser. I find it very simple via the zombie library. Below you can see a small example, however the documentation is a great resource.
// Dependencies
var Browser = require("zombie");
// Load localhost:9000
Browser.localhost("localhost", 9000);
// Load the page from localhost,
// including js, css, images and iframes
var browser = new Browser({
features: "scripts css img iframe"
});
// Open the page and list the resources
browser.visit("/", function(error) {
console.log(browser.resources.map(function (c) {
return c.request.url;
}));
});
So we have a chrome extension and the background.html looks like this
<!DOCTYPE html>
<html>
<head>
<script id="google-maps-js" type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?&key=AIzaSyCnHJh2lsVbM_fPXgwciRO-fInFgkkEebw&sensor=false&libraries=places"></script>
<script type="text/javascript" src="/jquery.js"></script>
<script type="text/javascript" src="/background_helper.js"></script>
<script type="text/javascript" src="/background.js"></script>
</head>
<body>
<div id="map"></div>
</body>
</html>
The google maps api js is loaded once when the extension is installed or when the browser is first opened but if the browser is left open for more than 3 days, the geocoder service starts to return 403 errors and I believe it's related to the problem mentioned in the answer to this question:
After months of 100% stability, today I get 403 Error on google maps services
It seems that after 3 days, the javascript becomes 'stale' and google will return 403 errors to any requests.
I tried putting in a timer so that every 24 hours it removes the google maps script tag and reads it but then I get errors saying I've included the google maps script multiple times and it will behave unexpectedly.
How do I "reload" or "refresh" the javascript so it's no longer stale?
You should be able to simply manipulate the <script> element.
Delete it from the DOM by id, and insert an identical copy. That will re-run the script, and the server should be configured to disallow caching if it is indeed getting stale.
Intro: I'm having a problem implementing google analytics in a website that is not mine and would like to correctly implement it and confirm without the need of waiting several hours untill google checks my website again.
Main problem: I copy pasted the script code to every page on the website (all html) but google isn't detecting it. I suspect the problem is in the first index.html on the root of the website but for now I must have it there so please don't tell me I have to remove this file. That is not the question.
Code of index.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script>
<!-- GOOGLE ANALYTICS PASTED CODE IS HERE -->
</script>
<!-- TITLE AND METADATA ARE HERE BUT NOT RELEVANT -->
<meta http-equiv="REFRESH" content="0;url=http://www.FAKEDOMAIN.com/Site/index.html">
</head>
<body>
</body>
</html>
Extra info: Google control not installed because it says it doesn't detectes the code on initial page. I think it is because the script might not be tottaly executed and then the page refreshs to another link and google will just consider that the script isn't installed on the initial page because the script wasn't tottaly run. Is there a way I can force the full execution before redirecting? Then a way to confirm with alerts if the data is being collected properly so that I am sure it is just a matter of time before google analytics control is properly installed?
I don't believe Google actually attempts to detect the code on your page. Rather, the page runs and the script executes and pings some Google server to report the usage. Once this usage gets reported, you'll start seeing activity in your Google account. This might take a day or two.
I think you're right about the meta refresh though. Once the meta tag is encountered, the browser will redirect and script on the page is not executed. I would suggest removing the <meta> tag and redirecting with script, after the Google Analytics code is run:
<script>
// GA code here
location.href = 'http://www.FAKEDOMAIN.com/Site/index.html'; //Redirect here
</script>