I am trying to include a YouTube subscribe button in localhost and it does not seem to work, while in JSfiddle it works perfectly fine. Am I doing something wrong? I am using code from https://developers.google.com/youtube/youtube_subscribe_button
My code on localhost:
<!DOCTYPE html>
<html>
<head>
<title>Testing a YouTube button</title>
<script src="https://apis.google.com/js/platform.js"></script>
</head>
<body>
<div class="g-ytsubscribe" data-channelid="UCWTfbcQsyNLv1ZLsZrhVW2w" data-layout="full" data-count="default"></div>
</body>
</html>
JSFiddle example
Thanks!
It works fine when I test it on http://localhost, but it fails when I test it using a file:// URL.
The console reports:
cb=gapi.loaded_0:45 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('file://') does not match the recipient window's origin ('null').
The script only works when you load the webpage of HTTP(S). Don't try to use it on file: URLs (and always look at the console for error messages!).
Related
A very basic question
Cannot load external javascript resource on server
I am working on a Play framework project. I've made some basic html view with some Javascript. It works correctlly when I have my js code in the actual view.
However, when I tried moving js code to a separate file and load it using
<script> src="main.js" </script>
It works correctly when opened using plain chrome browser. However when I run it on server and it fails and chrome dev console prints the following message
GET http://localhost:9000/main.js 404 (Not Found)
I've tried setting up a GET request on targer URL but cannot pass main.js as an arguement to Ok method
def getmainJs()= Action {
Ok()
}
Is there a painless way to access the js code or do I have to go through the process of setting up the JavacriptRouter menntioned here. The app is only going to be 2 views to I kind of don't care about scalability
I created an example on how to serve a Javascript file:
Routes:
GET /foo sk.ygor.stackoverflow.q53319493.controller.ApplicationController.foo
GET /assets/*file controllers.Assets.versioned(file)
View:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="#routes.Assets.versioned("main.js")"></script>
</body>
</html>
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)
I am trying to load a txt file using jquery in Chrome. Why it does not work? I have copied this code snippet from w3schools, and all i have changed is their url.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("http://stackoverflow.com/questions/15114993/how-to-embed-a-file-in-html-using-jquery-load");
alert("clicked");
});
});
</script>
</head>
<body>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<button>Get External Content</button>
</body>
</html>
Chrome throws the following error when executing your code:
Origin null is not allowed by Access-Control-Allow-Origin.
You must:
Host your HTML code on your local web server, so that it is accessible at:
http://localhost/your_directory/index.html
Update your code to load your out.txt, placed in the same folder where your index.html file is, like this (using relative paths)...
$("#div1").load("out.txt");
...or like this (using absolute paths):
$("#div1").load("http://localhost/your_directory/out.txt");
And you are done! :-)
Ok the issue you are probably having here seems to happen allot with chrome and ajax requests. Chrome throws a security issue if running locally try putting your code on a web server, or try firefox.
Or if your on a mac you can open chrome using like this from the command line to prevent the security issue
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-file-access-from-files
There are loads of posts on google if your search for "allow file access from files chrome"
Good luck
Trying to get phonegap to work on an iPhone.
With a completely blank project, except for jsconsole for debbuging and the cordova.ios.js file, I keep getting errors as soon as the app loads:
file:///var/mobile/Applications/19E49099-C481-44B4-8803-07A0390EA3B3/pplats.app/www/index.html:1link
TypeError: 'undefined' is not a function
I cant get anything more out of the stacktrace. Why could I be getting a TypeError? Completely running out of ideas here.
The HTML file:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="cordova.ios.js"></script>
<script src="http://jsconsole.com/remote.js?79F01FAA-19A6-40C2-B32F-7FEF1D5E3998"></script>
</head>
<body>
testing......
</body>
</html>
What does your project directory structure look like?
My guess is that this is related to the src="cordova.ios.js" link, have you tried specifying an absolute or root-relative (/path-to-file/cordova.ios.js) path to the js file?
I am getting this error on a website I'm working on, I have simplified the code down to the below example, which produces this error in webkit (chrome 15.0.x), I don't see the error in firefox.
I have looked around at other SO posts regarding the same error and most of them are in reference to using the youtube API and cross domain references.
I have tried:
changing the doctype, (no difference)
adding origin params to the youtube call (no difference)
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title></title>
</head>
<body class="page front logged-in no-sidebars">
<iframe width="393" height="230" src="http://www.youtube.com/embed/QH2-TGUlwu4" frameborder="0" ></iframe>
</body>
</html>
This is a common issue with cross-site messaging (where one page/website communicates with another page/website via an IFrame using javascript callbacks as a medium). It doesn't always work out and some browsers may not always catch the callback event and may register it as a security error if the protocol or port differs.