I am attempting to use Chrome-Frame on a site I'm building.
In IE8 and below, everything works fine...
In IE9 I get this error:
SCRIPT5: Access is denied.
cf-dlpage.js, line78 character 209
No idea what to do!
here is the conditional that is triggering the behaviour:
<!--[if lte IE 9]>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
<style>
body {
overflow-y:hidden;
}
.chromeFrameOverlayContent {
border:none;
overflow:hidden;
}
.chromeFrameOverlayContent iframe {
border:none;
overflow:hidden;
}
.chromeFrameOverlayCloseBar {
display:none;
}
.chromeFrameOverlayUnderlay {
background-image:url(/img/bg.png);
opacity: 1;
filter: alpha(opacity = 100);
}
</style>
<script type="text/javascript">
window.onload = function() {
CFInstall.check({
url: "/fix/update.html",
mode: "overlay",
destination: "/"
});
};
</script>
<![endif]-->
Any help greatly appreciated!
Try this it sounds that its related to your problem. i hope it helps.
read comment from erikwright#chromium.org, is the last comment right now.
The problem is caused by this:
Your page is on www.example.com
The installation routine creates an iframe with a url www.google.com/...
The iframe page itself executes Javascript and tries to read window.parent, but...
... this is not allowed because both frames have different domains.
The only solutions seem to be:
Create your own install script
Google fixes their script
I wasted a whole day trying to work around this problem (nested frames, custom scripts, routing Google requests through my server,...) until it dawned me why Google seems to ignore this bug:
Most people simply don't notice the problem. The installation is performed successfully, regardless of this error. To actually get a message box you have to enable Javascript debugging or the Show Javascript errors feature.
You and I have enabled said features because we are developers, so naturally we freak out, but Average Joe won't notice anything.
Related
If I were to write an application that controls another application which I don't have the binaries to,
For example, an application that by itself would open Google Earth and place the camera in a specific point my application would tell it, say -24,131, and then command google earth to save the image to a specific folder.
What is the approach to this?
How can I know the functions that are being executed and fire them on behalf of a control program like that?
Also, I will also need to know that downloading of images was finished so I can grab the image.
I saw there is an API for google earth, but I don't know if I can use it to control google-earth (the application itself)
You can use the Google Earth API (developers.google.com/earth/) to control a Google Earth globe instance.
See Javascript code snapshot here:
var ge;
google.load("earth", "1");
function init() {
google.earth.createInstance('map3d', initCB, failureCB);
}
function initCB(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
ge.getOptions().setStatusBarVisibility(true);
ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);
ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true);
ge.getLayerRoot().enableLayerById(ge.LAYER_ROADS, true);
var lookAt = ge.createLookAt('');
lookAt.setLatitude(41.26);
lookAt.setLongitude(-100.00);
lookAt.setRange(800000.0);
ge.getView().setAbstractView(lookAt);
}
function failureCB(errorCode) {
alert(errorCode);
}
google.setOnLoadCallback(init);
See HTML code here:
<!DOCTYPE html>
<head>
<script src="http://www.google.com/jsapi"></script>
</head>
<style>
body {
margin:20px;
height:100%;
width:98%;
}
#map3d {
width:75%;
float:right;
}
</style>
<body>
<div id="map3d"></div>
</body>
</html>
The you can use wkhtml2pdf (code.google.com/p/wkhtmltopdf/) function wkhtmltoimage, or PhantomJs (github.com/ariya/phantomjs/wiki/Screen-Capture) to get an image version.
Hope it helps!
Cheers,
Mihai
I am trying to display an ajax spinner when loading AJAX content.
The following code appears to work fine in Firefox but not in IE7. The functions to show and hide the spinner are being called but the browser just does not display it.
Here is the jQuery:
$.ajax({
url: filterorSearch,
data: {filterParams: JSON.stringify(filters), requestTime: new Date().getTime()},
beforeSend: function(){
showLoadingGraphic();
},
complete: function(){
hideLoadingGraphic();
},
success: function(data){
$("#BreakingNews").html(data);
GetRelatedarticles();
}
});
function showLoadingGraphic() {
alert("show");
var showSpinner = $('#page-placeholder-wrapper #main-left').prepend('<div id="ajaxLoader"></div>');
return showSpinner;
}
function hideLoadingGraphic() {
alert("hide");
var hideSpinner = $('#ajaxLoader').remove();
return hideSpinner;
}
And the associated CSS for the spinner:
#page-placeholder-wrapper #main-left
{
position:relative;
}
#ajaxLoader
{
background:rgba(255,255,255,.7) url("../images/icon-ajax-loading.gif") no-repeat center center;
height:100%;
left:0;
position:absolute;
top:0;
width:100%;
z-index:9999;
}
To get you working try this:
background: url("../images/icon-ajax-loading.gif") no-repeat center center rgba(255,255,255,.7);
I don't know why the rgba has to be last!
[EDIT]
IE does not support rgba, therefore with it starting on background: it errors and the rest of the line isn't executed for the css
See: Browser Support for RGBa
JQuery actually fires events when it's doing ajax.
$(document).ajaxStart(function(){
$('#ajaxIndicator').show();
}).ajaxStop(function(){
$('#ajaxIndicator').hide();
});
This will save you a lot of time over manually doing it for each individual call.
You could have a DIV relative to the top of the document which you can show/hide which overlays everything else on the page. (I forget the exact CSS which makes it always be 200px from the top of the screen, etc) update: I think it's position:fixed, although I'm not sure how well this will work in IE.
<body>
<div id="ajaxIndicator" style="position:fixed; top:200px; text-align:center">
<img src="../indicator.gif" /> Loading ...
</div>
...
Might be problems with Z sorting of your DOM elements;
IE handles Z sorting of objects in a bit different way then other browsers. Try setting z-index on your wrapper element and it should help. Generally it's a best practice if you want to save you troubles with elements positioned with relatie or absolute positioning to always give their parent proper z-index;
Having the actual page to debug would make it easier.
For the sake of my sanity and getting this done today.
I have added the "ajaxLoader" element to the markup, hidden initially with CSS and then show/hide when AJAX starts/stops.
This works fine for all browsers.
Thanks to all for their input.
I have simplified a problem I faced in Firefox (the original code is generated by server side controls). Open the following snippet in IE and in Firefox:
<html>
<style>
.AllInline, .AllInline * { display: inline; }
</style>
<span class="AllInline">
Test
<script type="text/javascript">
<!-- var obj = {}; //-->
</script>
</span>
</html>
In IE, I get:
Test
While in Firefox, I get:
Test <!-- var obj = {}; //-->
The content of the script block becomes visible somehow.
I was not expecting the styling rules to be applied to script blocks (can't really see a reason why one would want this either).
Would anyone have an explanation ?
base, basefont, datalist, head, meta, script, style, title, noembed and param tags are hidden by the simple expedient of setting display: none; in html.css (which is a UA stylesheet). So they are subject to being unhidden by page CSS such as your example. area on the other hand has display: none ! important; because it has special internal handling (the image effectively owns the area).
Don't put JavaScript there. Insert it just before </body></html>.
Test your HTMl in the Echochamber.
fascinating bug!
you can add .AllInline script {display: none;} to your css to hide it.
I'm working on my first GM script, to replace the Flash previews on http://www.freesound.org with HTML 5 audio tags, and to add a download link to search results. I have the latter working fine, but I can't get the audio tag to display in Firefox 3.5.9. Here's my script:
// ==UserScript==
// #name FreeSound HTML 5 Preview
// #namespace http://thewordnerd.info
// #description Replace Flash-based sound previews on freesound.org with audio tags and add quick download links
// #include http://freesound.org/*
// #require http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js
// ==/UserScript==
$(document).ready(function() {
$("embed").remove();
$(".samplelist").each(function(index) {
sampleNo = $(this).find("a:first").attr("href").split("?")[1].split("=")[1];
userName = $(this).find("a:eq(1)").html();
title = $(this).find("a:first").html().replace(/ /g, "_");
url = "/download/"+sampleNo+"/"+sampleNo+"_"+userName+"_"+title;
$(this).find("script").replaceWith("<audio src='"+url+"' controls='controls' type='audio/wave'/>");
//$(this).find("audio").removeAttr("tabindex");
$(this).append("<a href='"+url+"'>Download</a>");
});
});
I can see the element in Firebug and it seems just fine.
Thoughts on what I might be doing wrong here? Since the download link does download the requested file, since it's a wave and since I think I've set the correct type, I'm at a loss as to why this isn't displaying.
It may not be your script so much as the freesound.org site/server.
When I run a modified version of your script, the audio controls all appear for a split second before reverting to the error display, like so:
Firefox reports MEDIA_ERR_SRC_NOT_SUPPORTED for the files I checked.
Save this code to your machine and then run it with Firefox:
<html>
<head>
<title>Audio File test</title>
</head>
<body>
<audio id="aud1" controls="true" type="audio/ogg"
src="http://www.freesound.org/download/7521/7521_abinadimeza_Rainfall.ogg">xxx</audio>
<audio id="aud2" controls="true" type="audio/ogg"
src="http://developer.mozilla.org/#api/deki/files/2926/=AudioTest_(1).ogg">xxx</audio>
</body>
<script type="text/javascript">
window.addEventListener ("load", ErrorReport, false);
function ErrorReport (evt)
{
console.log (document.getElementById ("aud1").error);
console.log (document.getElementById ("aud2").error);
}
</script>
</html>
.
You'll see that the known good file, from Mozilla, works correctly but the one from freesound.org does not. This may be a bug/limitation in Firefox -- both files play fine on my local player.
Here is a link to the Firefox bug system, to search for or report bugs.
I began reading about Auto-loading a google map at:
http://code.google.com/apis/ajax/documentation/#AutoLoading
What's unclear to me is how to actually load the google map.
I have tried:
<script src="http://www.google.com/jsapi?autoload=%7B%22modules%22%3A
%5B%7B%22name%22%3A%22search%22%2C%22version%22%3A%221.0%22%2C
%22language%22%3A%22en%22%7D%2C%7B%22name%22%3A%22maps%22%2C%22version
%22%3A%222.X%22%7D%2C%7B%22name%22%3A%22elements%22%2C%22version%22%3A
%221.0%22%2C%22packages%22%3A%5B%22localsearch%22%5D%7D%5D
%7D&key=MY_KEY"></script>
<script type="text/javascript">
//<![CDATA[
google.load("maps", "2.x");
google.setOnLoadCallback(function() {
map = new google.maps.Map2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 6);
map.addControl(new GSmallMapControl());
}
);
//]]>
</script>
But the map doesn't load.
Strange thing is that if I simply remove the "autoload=..." from the
URL - the map loads and works fine.
If I keep the autoload=... in the url and comment out the manually loading "google.load("maps", "2.x");", it still doesn't work.
Any ideas on how to properly use the auto-load functionality to gain
the most performance (least latency)?
You should use:
<script src="http://www.google.com/jsapi?autoload=%7B%22modules%22%3A
%5B%7B%22name%22%3A%22search%22%2C%22version%22%3A%221.0%22%2C
%22language%22%3A%22en%22%7D%2C%7B%22name%22%3A%22maps%22%2C%22version
%22%3A%222.X%22%7D%2C%7B%22name%22%3A%22elements%22%2C%22version%22%3A
%221.0%22%2C%22packages%22%3A%5B%22localsearch%22%5D%7D%5D
%7D&key=MY_KEY"></script>
Any nothing else. Remove the code after this in you example