I have a google site. I want to use an external script to make google visualisations work on my site:
This is the piece of script that goes wrong.
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
I added this script trhoug a htmlbox and i get the error:
1+13 - 42: failed to load external url jsapi
Why won't itthe jsapi load?
As far as I know, you can't load external site/page (even google pages) within HTML Box gadget.To do so, you can create a custom gadget in Google Gadget Editor(using your gmail account),by visiting the following URL,
http://www.google.com/ig/ifr?url=gge.xml
and you can put the above code there and save it,you will get url by right click and copy link in the right side file name.Then, in your google sites page,
Edit Page --> Insert --> More Gadgets --> Add Gadgets By URL --> Paste the URL copied above and save.
Related
This seems to be the easiest thing to do, but it's just not working. In a normal browser the .html and .js files works perfectly, but in the Chrome/Firefox extension the onClick function is not performing what it's supposed to do.
.js file:
function hellYeah(text) {
document.getElementById("text-holder").innerHTML = text;
}
.html file:
<!doctype html>
<html>
<head>
<title>
Getting Started Extension's Popup
</title>
<script src="popup.js"></script>
</head>
<body>
<div id="text-holder">
ha
</div>
<br />
<a onClick=hellYeah("xxx")>
hyhy
</a>
</body>
</html>
So basically once the user clicks "hyhy", "ha" should change into "xxx". And again - it works perfectly in the browser but does not work in the extension. Do you know why? Just in case I'm attaching the manifest.json below as well.
manifest.json:
{
"name": "My First Extension",
"version": "1.0",
"manifest_version": 2,
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"http://api.flickr.com/"
]
}
Chrome Extensions don't allow you to have inline JavaScript (documentation).
The same goes for Firefox WebExtensions (documentation).
You are going to have to do something similar to this:
Assign an ID to the link (<a onClick=hellYeah("xxx")> becomes <a id="link">), and use addEventListener to bind the event. Put the following in your popup.js file:
document.addEventListener('DOMContentLoaded', function() {
var link = document.getElementById('link');
// onClick's logic below:
link.addEventListener('click', function() {
hellYeah('xxx');
});
});
popup.js should be loaded as a separate script file:
<script src="popup.js"></script>
Reason
This does not work, because Chrome forbids any kind of inline code in extensions via Content Security Policy.
Inline JavaScript will not be executed. This restriction bans both inline <script> blocks and inline event handlers (e.g. <button onclick="...">).
How to detect
If this is indeed the problem, Chrome would produce the following error in the console:
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.
To access a popup's JavaScript console (which is useful for debug in general), right-click your extension's button and select "Inspect popup" from the context menu.
More information on debugging a popup is available here.
How to fix
One needs to remove all inline JavaScript. There is a guide in Chrome documentation.
Suppose the original looks like:
<a onclick="handler()">Click this</a> <!-- Bad -->
One needs to remove the onclick attribute and give the element a unique id:
<a id="click-this">Click this</a> <!-- Fixed -->
And then attach the listener from a script (which must be in a .js file, suppose popup.js):
// Pure JS:
document.addEventListener('DOMContentLoaded', function() {
document.getElementById("click-this").addEventListener("click", handler);
});
// The handler also must go in a .js file
function handler() {
/* ... */
}
Note the wrapping in a DOMContentLoaded event. This ensures that the element exists at the time of execution. Now add the script tag, for instance in the <head> of the document:
<script src="popup.js"></script>
Alternative if you're using jQuery:
// jQuery
$(document).ready(function() {
$("#click-this").click(handler);
});
Relaxing the policy
Q: The error mentions ways to allow inline code. I don't want to / can't change my code, how do I enable inline scripts?
A: Despite what the error says, you cannot enable inline script:
There is no mechanism for relaxing the restriction against executing inline JavaScript. In particular, setting a script policy that includes 'unsafe-inline' will have no effect.
Update: Since Chrome 46, it's possible to whitelist specific inline code blocks:
As of Chrome 46, inline scripts can be whitelisted by specifying the base64-encoded hash of the source code in the policy. This hash must be prefixed by the used hash algorithm (sha256, sha384 or sha512). See Hash usage for <script> elements for an example.
However, I do not readily see a reason to use this, and it will not enable inline attributes like onclick="code".
I had the same problem, and didn´t want to rewrite the code, so I wrote a function to modify the code and create the inline declarated events:
function compile(qSel){
var matches = [];
var match = null;
var c = 0;
var html = $(qSel).html();
var pattern = /(<(.*?)on([a-zA-Z]+)\s*=\s*('|")(.*)('|")(.*?))(>)/mg;
while (match = pattern.exec(html)) {
var arr = [];
for (i in match) {
if (!isNaN(i)) {
arr.push(match[i]);
}
}
matches.push(arr);
}
var items_with_events = [];
var compiledHtml = html;
for ( var i in matches ){
var item_with_event = {
custom_id : "my_app_identifier_"+i,
code : matches[i][5],
on : matches[i][3],
};
items_with_events.push(item_with_event);
compiledHtml = compiledHtml.replace(/(<(.*?)on([a-zA-Z]+)\s*=\s*('|")(.*)('|")(.*?))(>)/m, "<$2 custom_id='"+item_with_event.custom_id+"' $7 $8");
}
$(qSel).html(compiledHtml);
for ( var i in items_with_events ){
$("[custom_id='"+items_with_events[i].custom_id+"']").bind(items_with_events[i].on, function(){
eval(items_with_events[i].code);
});
}
}
$(document).ready(function(){
compile('#content');
})
This should remove all inline events from the selected node, and recreate them with jquery instead.
I decide to publish my example that I used in my case. I tried to replace content in div using a script. My problem was that Chrome did not recognized / did not run that script.
In more detail What I wanted to do: To click on a link, and that link to "read" an external html file, that it will be loaded in a div section.
I found out that by placing the script before the DIV with ID that
was called, the script did not work.
If the script was in another DIV, also it does not work
The script must be coded using document.addEventListener('DOMContentLoaded', function() as it was told
<body>
<a id=id_page href ="#loving" onclick="load_services()"> loving </a>
<script>
// This script MUST BE under the "ID" that is calling
// Do not transfer it to a differ DIV than the caller "ID"
document.getElementById("id_page").addEventListener("click", function(){
document.getElementById("mainbody").innerHTML = '<object data="Services.html" class="loving_css_edit"; ></object>'; });
</script>
</body>
<div id="mainbody" class="main_body">
"here is loaded the external html file when the loving link will
be clicked. "
</div>
As already mentioned, Chrome Extensions don't allow to have inline JavaScript due to security reasons so you can try this workaround as well.
HTML file
<!doctype html>
<html>
<head>
<title>
Getting Started Extension's Popup
</title>
<script src="popup.js"></script>
</head>
<body>
<div id="text-holder">ha</div><br />
<a class="clickableBtn">
hyhy
</a>
</body>
</html>
<!doctype html>
popup.js
window.onclick = function(event) {
var target = event.target ;
if(target.matches('.clickableBtn')) {
var clickedEle = document.activeElement.id ;
var ele = document.getElementById(clickedEle);
alert(ele.text);
}
}
Or if you are having a Jquery file included then
window.onclick = function(event) {
var target = event.target ;
if(target.matches('.clickableBtn')) {
alert($(target).text());
}
}
I was following this tutorial
(https://learn.microsoft.com/en-us/learn/modules/create-your-first-iot-central-app/)
In unit 4, I followed all the steps but what I could see was just a blank page like this
Unit 4 exercise result
<!DOCTYPE html>
<html>
<head>
<title>Map</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css">
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
<!-- Add a reference to the Azure Maps Services Module JavaScript file. -->
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas-service.min.js"></script>
<script>
function GetMap() {
//Instantiate a map object
var map = new atlas.Map("myMap", {
//Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: 'mB~~~~~~(I wrote my maps primary key here)'
}
});
}
</script>
<style>
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#myMap {
width: 100%;
height: 100%;
}
</style>
</head>
<body onload="GetMap()">
<div id="myMap"></div>
</body>
</html>
Azure Maps Resource
This feedback page also doesn't work...
(https://feedback.azuremaps.com/)
Feedback Maps
Also, in this website, when I press "Open In New Tab", I cannot see anything...
(https://azuremapscodesamples.azurewebsites.net/)
Code samples Maps
I had spent almost 4 hours but couldn't find out the solution...
What should I need to do to see proper Maps on those pages?
If all the different sites that use Azure Maps doesn't work for you its likely one of the following reasons:
Make sure you are in a supported region. Azure Maps is not available to users who are located in China or South Korea, and the requests to the platform are actively blocked.
You are using an unsupported browser: https://learn.microsoft.com/en-us/azure/azure-maps/supported-browsers
WebGL is either disabled in your browser, or isn't working. Try this sample: https://azuremapscodesamples.azurewebsites.net/Map/Detect%20if%20browser%20is%20supported.html
Your graphic card has issues, try updating the drivers.
check how the map starts
$(document).ready(function () {
InitMap();
});
function InitMap() {
var map = new atlas.Map('myMap', {
center: [-73.98235, 40.76799],
zoom: 10,
language: 'en-US',
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: 'key1*****'
}
});
}
$(document).ready(function () {
InitMap();
});
I have run into a dead end trying to get the following HTML to work. I am trying to use the real time gauge chart to display a value coming from a photon. This is the snippet code from the pubnub site.
(I have proven that the published value is arriving in the Javascript using the commented out pubnub code in the Javascript. The value is displayed in the P tag.)
The P tag is displayed on the screen, but no gauge is displayed.
Could you please have a look at my code and guide me on where I have made a mistake. I have not worked with EON before, so I may be making very basic mistake.
<!DOCTYPE html>
<html>
<!-- <script type="text/javascript" src="http://cdn.pubnub.com/pubnub-3.16.1.min.js"></script> -->
<script type="text/javascript" src="//pubnub.github.io/eon/v/eon/0.0.10/eon.js"></script>
<link type="text/css" rel="stylesheet" href="//pubnub.github.io/eon/v/eon/0.0.10/eon.css"/>
<div id="chart"></div>
<script type="text/javascript">
*var pubnub = PUBNUB.init({subscribe_key: 'xxxxxxx'});
/*
pubnub.subscribe ({channel : "datatest", message : function(tempmsg)
{document.getElementById("x").innerHTML = tempmsg.eon.data;}});
*/
var channel 'datatest';
eon.chart({
channel: channel,
generate: {
bindto: '#chart',
data: {
type: 'gauge',
},
gauge: {
min: 0,
max: 100
},
color: {
pattern: ['#FF0000', '#F6C600', '#60B044'],
threshold: {
values: [30, 60, 90]
}
}
}
});
</script>
<body>
<p id ="x"> This is my text that will be replaced by the value from the photon </p>
</body>
</html>
The output from the photon looks like this:
publishing message: {"eon": {"data":56}}
publishing message: {"eon": {"data":56}}
publishing message: {"eon": {"data":56}}
publishing message: {"eon": {"data":56}}
There is a missing line of code in the PubNub EON JavaScript embed code for the Gauge Chart.
You must add pubnub: pubnub, to bind the graph instance to the PubNub stream.
Tumblr has an option to upload one audio file as a post but I'm looking to make an embedded playlist of multiple tracks. I'm trying to use JW Player ( http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5 ) to do it but so far no success.
Here is the code I'm inserting into the Head of my tumblr Theme:
<script type="text/javascript" src="http://216.172.180.215/~hello/music/jwplayer/jwplayer.js"></script>
And here is the code I'm inserting directly into a Tumblr post:
<div id="container">Loading the player ...</div> <script type="text/javascript"> jwplayer("container").setup({ flashplayer: "http://216.172.180.215/~hello/music/jwplayer/player.swf", file: "http://216.172.180.215/~hello/music/jwplayer/video.mp4", height: 270, width: 480 }); </script>
This is how the JW Player Guide explains it should work, but since it's not I'm assuming that the Tumblr source code is doing something to prevent it from working. Any insights as to what I'm doing wrong here?
The code below worked for me:
<div id='container'></div>
<script type="text/javascript">
jwplayer('container').setup({
'flashplayer': 'http://216.172.180.215/~hello/music/jwplayer/player.swf',
'file': 'http://216.172.180.215/~hello/music/jwplayer/video.mp4',
'height': '270',
'width': '480'
});
</script>
I am a new to OAuth.
I just doing some work on that.
I have done following code. but the problem is that it opens the new window and then redirect in to the same window, it is not coming on the browser window from which (parent) it calls.
Also, can anyone tell me how can i get UserName and Email of Gmail account in to my application.
My sample code is........
<form id="form1" runat="server">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
google.load("identitytoolkit", "1.0", { packages: ["ac"] }); </script> <script type="text/javascript">
$(function () {
window.google.identitytoolkit.setConfig({
developerKey: "AIzaSyAj99p8A9p5ay9E89jRHKuYZRrN3fSWp90",
companyName: "tatvasoft",
callbackUrl: "http://localhost:51749/Logins/Result.aspx",
realm: "",
userStatusUrl: "http://localhost:51749/Logins/Login.aspx",
loginUrl: "http://localhost:51749/Logins/Login.aspx",
signupUrl: "http://localhost:51749/Logins/Result.aspx",
homeUrl: "http://localhost:51749/Logins/Default.aspx",
logoutUrl: "http://localhost:51749/Logins/Default.aspx",
language: "en",
idps: ["Gmail", "Hotmail"],
tryFederatedFirst: true,
useCachedUserStatus: false
});
$("#navbar").accountChooser();
});
this should get you started
http://havethunk.wordpress.com/2011/08/10/google-identity-toolkit-asp-net-mvc3/
The important part is what's on your page at:
http://localhost:51749/Logins/Result.aspx
You need to have some javascript to reload the parent page, or handle the log in action in the parent window. Something like the following will work:
<html>
<head>
<script type='text/javascript'>
function notify() {
window.opener.location.reload();
// or you could use a redirect:
// window.opener.location = "/"
window.close();
}
</script>
</head>
<body onload='notify();'>
</body>
</html>
If you are looking for a full guide for implementing Google Identity Toolkit in MVC3, I would follow the link Ali suggests: http://havethunk.wordpress.com/2011/08/10/google-identity-toolkit-asp-net-mvc3/
Alternatively, just follow the documentation on the GITKit website: http://code.google.com/apis/identitytoolkit/v1/getting_started.html