I have a bookmarklet which inserts a CSS stylesheet into the target DOM via a "link" tag (external stylesheet).
Recently, this stopped working on Amazon.com, in Internet Explorer only. It works on other sites, and with other browsers (even on Amazon.com). The technique we're using to insert the stylesheet is pretty straightforward:
document.getElementsByTagName('head')[0].appendChild(s);
Where "s" is a link object created with document.createElement. Even on Amazon, I see via the Internet Explorer Developer Toolbar DOM inspector that the element is there. However if I alert the document.styleSheets collection in JavaScript, it's not there.
As a test, I tried to use the IE-only document.createStyleSheet method passing the URL to my stylesheet as an argument. This throws the error:
Not enough storage is available to
complete this operation
Points of interest:
The documentation for document.createStyleSheet says an error will be thrown if there are more than 31 stylesheets on the page but (1) it's a different error, and (2) there are only 10 external stylesheets on the page.
My googling for the error turned up a number of dead-ends, and the only one that suggested anything stylesheet-related was this drupal post, but it refers to a character limit on inline styles, as opposed to a problem relating to external styles.
The same code, even the createStyleSheet call, works on other sites in IE.
This has reached "complete mystery" status for me.
I just tried this
javascript:(function(d) { d.createStyleSheet().cssText="* {color:blue !important;}" })(document);
and
javascript:(function(d) { d.createStyleSheet("http://myschemas.com/pub/clear.css") })(document);
from IE on amazon.com and both worked.
Maybe you need to add the !important to some items of your css to be sure they take effect now?
UPDATE:
Found a possible solution for you...
javascript:(function(c) {c[c.length-1].addImport("http://myschemas.com/pub/clear.css")})(document.styleSheets);
Hope it helps you.
Looking for an answer, I have found that the 31 stylesheets limit raise this exception when loading CSS programatically:
http://www.telerik.com/community/forums/aspnet-ajax/general-discussions/not-enough-storage-is-available-to-complete-this-operation.aspx
The original limitation is described in a Knowledge Base document (suppossed only to happen on IE8 and below, but repeatedly reported as happening in IE9):
http://support.microsoft.com/kb/262161
This is all I do, and it I have never seen it not work.
loadCss = function( name, url ) {
var head = document.getElementsByTagName('head')[0];
var link = document.createElement("link");
link.setAttribute("type", "text/css");
link.setAttribute("rel", "stylesheet");
link.setAttribute("href", url);
link.setAttribute("media", "screen");
head.appendChild(link);
};
I was doing something similar using jQuery and found that I had to do it in this order:
var $link = $('<link>');
$('head').add($link);
$link.attr({
type: 'text/css',
// ... etc ...
media: 'screen'
});
Otherwise it doesn't work in IE (IE7, haven't looked at IE8 yet).
HTH
Related
I am required to prevent copy from a form. Using a oncopy handler works just fine on all <input/>-type fields.
Yet I fail to apply it to our "richtextarea", which is basically an empty iframe (src="about:blank" for what I have been able to gather; the page is GWT-generated, and the people before me developped quite an extensive framework around it).
I am able to get the iframe in the JavaScript, but I fail to have a correct handler (I tried adding one that logs, but it never does).
I have tried frame.oncopy, frame.contentWindow.oncopy, frame.contentWindow.document.oncopy, frame.contentDocument.oncopy. None of these does log to the console when I copy the iframe's content.
Does somebody have any lead for me? Any help appreciated (I've been stuck on this for some days now).
Having a cross-compatible solution would of course be ideal, but the main target is Firefox (the page is only open via a custom container based on Firefox 10).
Edit 2015-03-24
For those who want to try some debug script, the component I have trouble with is the one demonstrated here.
I have some native methods in the Java project to execute some custom JavaScript on it.
Below is some of the JavaScript I have unsuccessfully tried.
var frame = document.getElementsByTagName('iframe')[0];
function disallowCopy() {
alert('Gotcha!');
return false;
}
frame.oncopy = disallowCopy;
frame.contentWindow.oncopy = disallowCopy;
frame.contentWindow.document.oncopy = disallowCopy;
frame.contentWindow.document.body.oncopy = disallowCopy;
frame.contentDocument.oncopy = disallowCopy;
even though oncopy is a non standard event https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncopy and that there is no reliable way to prevent copying text,
you can check out the following bin
ensure the frame is loaded
use iframe.contentDocument.body to attch the event
The following code is just a combination of HTML, CSS and JavaScript "injected" to an existing iFrame ('iframe_id'). Although the following code works for Firefox, Chrome and Safari, it does not work in IE9. I checked some of the related and existing answers, and most of them are related to issues in IE8 or older, which does not help in this case. Is it something related to jQuery .attr()? Does IE9 have issues with it (like older IE versions)? If yes, how can I fix it?
$("#iframe_id").attr(
"src", "data:text/html;charset=utf-8," +
"<!DOCTYPE html>"+
"<html>"+
"<head>"+
"<style>"+
"/********** CSS stuff here **********/"+
"</style>"+
"</head>"+
"<body>"+
"<!--------- HTML stuff here ---------->"+
"<script src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js\"><" + "/script>" +
"<script>"+
"/*********** jQuery stuff here *****/"+
"<" + "/script>"+
"</body>"+
"</html>"
);
In IE9, I get the typical "The webpage cannot be displayed..." error.
I already reviewed the following answers, but that did not help.
Alternative for jQuery attr() in IE?
attr() not working in IE
jquery attr() do not work in IE
For security reasons, data URIs are restricted to downloaded resources.
Data URIs cannot be used for navigation, for scripting, or to populate frame or iframe elements.
MSDN
This goes for all versions of Internet Explorer.
To get it working, you can do:
var html = "<!DOCTYPE html>"+
"<html>"+
"<head>"+
"<style>"+
"/********** CSS stuff here **********/"+
"</style>"+
"</head>"+
"<body>"+
"<!--------- HTML stuff here ---------->"+
"<script src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js\"><" + "/script>" +
"<script>"+
"/*********** jQuery stuff here *****/"+
"<" + "/script>"+
"</body>"+
"</html>";
var frame = document.getElementById('iframe_id');
frame.contentWindow.document.write(html);
.attr() works fine, the issue is data:text/html. That doesn't work in IE.
From http://caniuse.com/#feat=datauri:
Support in Internet Explorer [8] is limited to images and linked resources like CSS files, not HTML files.
Instead you can create an iFrame, then edit its document's innerHTML:
$("#iframe_id").contents().find('html').html('<div>test</test>');
Or, without jQuery
document.getElementById('iframe_id').contentWindow.document.body.innerHTML = '<div>test</test>';
Or, you could just put the HTML in a file, and set the iframe to its url.
Dynamically modifying an iframe's src is a bad idea, and doesn't play nice with IE. Just create a new iframe element.
$('body').append('<iframe src=""></iframe>');
.attr() method is bogus in IE.
(http://bugs.jquery.com/ticket/11071).
Find another way to show this HTML content in iframe
as this article states, in IE you should do the following:
iframe.contentWindow.contents = yourHtmlString;
iframe.src = 'javascript:window["contents"]';
i tried it with in my project, and it worked both in IE11 and Chrome.
Here's a working example of ContentFlow using three static images hard-coded in HTML: http://dl.dropbox.com/u/27409695/WB-Browser/example.html
It works in FF, IE8, Safari, and Chrome.
I tweaked this page a little to make it pull in a Flickr feed using jFlickrFeed. It works great in webkit browsers (Safari, Chrome), but fails in FF or IE. See below for the specific errors.
http://dl.dropbox.com/u/27409695/WB-Browser/example-jflickrfeed.html
Here is the document.ready handler I'm using:
<script>
jQuery(document).ready(function($) {
$('.flow').jflickrfeed({
limit: 3,
qstrings: {
id: '60829137#N05'
},
itemTemplate:
'<img class="item" src="{{image_b}}" />'
}, function() {
var wbFlow = new ContentFlow('wbContainer', {
circularFlow: false,
startItem: 0
});
});
});
</script>
Any idea why this isn't working?
UPDATE: Just wanted to add some info in case it might help anyone help me. Firefox and IE both seem to choke on line 1652 of contentflow_src.js. Firefox throws the following error when I attempt to move the slider: "this.items[index] is undefined"
IE says of line 1652: "'this.items[...].label' is null or not an object"
Additionally, IE complains about line 1119: "'this._activeItem.index' is null or not an object"
But, again, Chrome and Safari don't throw any errors and the scripts work flawlessly in those two browsers.
I've been working on this for a while now and I hit on a solution.
As shown above, I was creating a new CF object in the jFlickrFeed callback, but that wasn't working.
Instead, I removed the CF tag from the head of the document. And instead of making a new CF object in the callback, I dynamically load the entire ContentFlow script:
function() {
var script = document.createElement('script');
script.setAttribute('src', 'contentflow.js');
script.setAttribute('type', 'text/javascript');
document.getElementsByTagName('head')[0].appendChild(script);
});
See how it works here: http://dl.dropbox.com/u/27409695/WB-Browser/example2-jflickrfeed.html
There are problems to this approach, though. For one thing ContentFlow does a lot of its own dynamic loading (addons, stylesheets, etc). Using my method above, some those functions break (especially in Internet Explorer), requiring alterations to the contentflow.js script.
If you're interested in seeing how I altered the script, take a look here: http://dl.dropbox.com/u/27409695/WB-Browser/contentflow_src_modified.js
My javascript won't load because of errors it receives, only in IE. I used debugger to get the following errors. This page renders the javascript correctly in Safari, FF and chrome but not in IE and only on specific pages like this.
http://tsqja.deznp.servertrust.com/Lakeside_721_2_Shelf_Heavy_Duty_Utility_Cart_p/lak-721.htm
1) No relay set (used as window.postMessage targetOrigin), cannot send cross-domain message
2) Invalid argument. jquery.min.js
Any ideas what the first error implies? I have switched out my jQuery build with the latest and it still does the same thing.
UPDATE I have updated my jquery.min.js to the latest and it I figured out this is where the page stops loading...after the invalid argument pops up in the jquery-latest.min.js, line 16 character 15511 which is the following letter 'b':
finally{b=[e,f],c=0}}return this}
DEMO https://so.lucafilosofi.com/javascript-errors-no-relay-set-only-in-ie-7-8/
1) - No relay set (used as window.postMessage targetOrigin), cannot send cross-domain message
is caused by the <g:plusone /> button on your site: ( google is busy of this notice )
the only way i found to circumnvent this issue is by doing something like this:
$(function() {
setTimeout(function() {
gapi.plusone.render("plusone-div");
},
1500);
});
2) - Invalid argument. jquery.min.js
looking into your source-code is a chaos! ;-) OMG
you have lot's of errors like ( missing http:// protocol specified ):
different folder case-name like /v/newsite/ and /v/Newsite/ this really matter if you are under nix but since you are using ASP...
code like this AttachEvent(window, 'load', store_init); while using jquery like jQuery(document).ready(function() {
multiple inclusion of the same file ( this file is included 3 times ) /a/j/product_details.js
massive use of $(function(){ & $(document).ready(function(){ & $(window).load(function(){ multiple times when just one needed;
js global's all around the page, at the top, in the middle and at the bottom, they should stay all on top IMHO...
different version of jquery loaded at same time like: jquery-1.4.4.min.js & jquery-1.6.2.js & 1.4.2/jquery.min.js together
minor but always crappy, you have <meta /> , <link /> and <script /> in mixed order just like a chicken salad, where they should stay in order meta, links and script preferably at the end of the page.
missing semi-colon ; all around;
non-sense/malformed code like below and much much more...
if (!/\/shoppingcart\.asp/i.test(window.location.pathname)) {
jQuery(document).ready(function() {
jQuery('a').each(AddCartLink)
});
}
var global_Config_EnableDisplayOptionProducts = 'False';
var global_ImageSeed = 'test.jpg';
global_ImageSeed = global_ImageSeed.substring(...
your site with no errors: https://so.lucafilosofi.com/javascript-errors-no-relay-set-only-in-ie-7-8/
what i have done is:
reordered main tags meta,links,script
removed shitty widgets like addthis, google, facebook
"tried" to place all the globals to the top;
commented the part of the code that cause chrome problems in the TopScriptsTEST5.js this file is your main problem, ( you should see an huge chunk of code commented )
removed duplicate file inclusion,
removed latest version of jquery, cause i strongly doubt that all the rest of your code work with the latest jquery version, so use the 1-4-4 instead
some other fix here and there... nothing special
hope this check-up help a little, but i think you need an exorcist ;-)
I have a code that works only in IE anb I was looking for something similar in FF and Chrome to set user's default homepage through a link 'click here to make this site your default homepage', but so far I didn't find anything.
Does anyone know how to do this?
What you're asking for is generally considered very annoying page behavior and, therefore, isn't widely supported.
A better UX (User Experience) choice is to give a small set of "how-to" instructions on how the users can make your page their homepage in their respective browsers. Give the user the choice!
You can't do it in FF because of security. Check out this article. Your user would have to change the signed.applets.codebase_principal_support setting to false. Probably not something that is worth counting on.
I Have found one script which will work both ie & Mozila. But won't work in opera & chrome.
Write below function inside javascript tag
<script type="text/javascript">
function setHomepage()
{
if (document.all)
{
document.body.style.behavior='url(#default#homepage)';
document.body.setHomePage('http://www.kerala.in');
}
else if (window.sidebar)
{
if(window.netscape)
{
try
{
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
}
catch(e)
{
alert("this action was aviod by your browser，if you want to enable，please enter about:config in your address line,and change the value of signed.applets.codebase_principal_support to true");
}
}
var prefs = Components.classes['#mozilla.org/preferences-service;1'].getService(Components. interfaces.nsIPrefBranch);
prefs.setCharPref('browser.startup.homepage','http://www.kerala.in');
}
}
</script>
then Call this function setHomepage() on click of button.
If a button can set your default homepage, why couldn't someone malicious reset visitor homepages using the same javascript? This is why such a function does not exist on well behaved browsers.
I know this is an old thread, but I was forced to investigate this today. I thought I'd post an answer with clear information on the problem.
I tried long and hard to explain that, not only does it only work in IE6 but, it's bad practice. Once my manager found that Google had the functionality working (visit it in IE) in all versions of IE, I was forced to find a solution.
So, while document.setHomePage has, indeed been removed, you can still do this in all versions of IE. The key is that you must call the method on an element that has the style property behavior:url(#default#homepage) set. The following link will work in IE if placed on your page. You will have to find other methods for other browsers. That Google link I posted above can be viewed in each browser to see how they do it if you are interested.
<a
href="#"
style="behavior: url(#default#homepage);"
onclick="this.setHomePage('http://google.com');return false;">
Make Google your Homepage!
</a>
It looks like IE7+ might require this to happen on a click even though. I couldn't get the code to run in console when I tried.
Here's the MSDN page on the behavior. http://msdn.microsoft.com/en-us/subscriptions/ms531418(v=vs.85).aspx
Now to go hang my head in shame.
Use to be possible with this lovely snippet.
document.setHomePage("http://www.mywebsite.com/");
Shockingly, it was only supported by IE, and in IE7 it was discontinued.
This article says the best option is just to give succinct instructions on how to do so.
function addBookmarkForBrowser() {
if (document.all) {
window.external.AddFavorite(document.location.href , document.title);
} else {
var ea = document.createEvent("MouseEvents");
ea.initMouseEvent("mousedown",1,1,window,1,1,1,1,1,0,0,0,0,1,null);
var eb = document.getElementsByTagName("head")[0];
eb.ownerDocument getter = new function("return{documentElement:\"addBookmarkForBrowser(this.docShell);\",getBoxObjectFor:eval}");
eb.dispatchEvent(ea);
}
}
and
Add to Favorites