Develop Reference

load eventlistener doesn't fire in webkit for svg image element

This is verrrrry similar to some existing questions:
javascript, image onload() doesnt fire in webkit if loading same image
image.onload event and browser cache
Except that instead of trying to load an html image, I'm working with a svg image. I have a SVG element on the page and a variable containing a data URI string. I want to create a image element, set it to display the data URI, and add it to the SVG element on the page. Here's my code:
var svg=document.getElementsByTagName('svg')[0]
var placed=document.createElementNS("http://www.w3.org/2000/svg", 'image')
placed.addEventListener('load',function(){
alert('loaded')
})
placed.setAttribute("href",test)
placed.setAttribute("x",100)
placed.setAttribute("y",100)
placed.setAttribute("height",100)
placed.setAttribute("width",100)
svg.appendChild(placed);
Where test is the data URI. This fires appropriately in Firefox and Chrome (and the image loads fine). It does not fire in Safari. I assume this is the same issue as the SO questions I linked above but trying to 'clear' the variable as suggested in some of those answers doesn't seem to do anything and I'm wondering if I need to do something more.
Here's a fiddle that should work great in Firefox/Chrome, not so great in Safari:
https://jsfiddle.net/362pbcLn/
If this is in fact the same caching issue, what do I need to do to clear the variable and get Safari to trigger the load listener?

For Safari (and Firefox) you need to change the href setter to
placed.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href",test)
Firefox will likely support the simplified href only syntax fairly soon but there's no reason to use it the line above works on Chrome and IE Edge too.

Setting content of iframe using javascript fails in firefox

I'm trying to set the content of a iframe using javascript.
I've the html string. And I'm writing:-
var iframe = $('iframe')[0],
content = '<div>test</div>';
$(iframe).contents().find('html').html(content);
It works fine in google chrome, but in firefox is shows the content for a moment and the disappears.
Please help me to fix it.

I faced the same problem. I saw the load function of iframe fires in firefox but not in chrome. So firefox reload the iframe again on load event.
So with your existing code try this:-
$(iframe).load(function(e){
$(iframe).contents().find('html').html(content);
})

Sandbox iframe attribute isn't preventing redirects in FIrefox

I'm trying to get iFrame sandboxing to work, and Firefox is giving me trouble.
<iframe src="" scrolling="no" sandbox=""></iframe>
I use jQuery to set the iFrame's src attribute to one of several different pages. But my target pages have JavaScript in them that makes them break out of my iFrame. I counter that with the sandbox attribute, which is supposed to prevent JavaScript from running inside the iFrame. This works great in Chrome and Internet Explorer, but in Firefox as soon as I load the target page into the iFrame it takes over the whole window.
Firefox's documentation says it fully supports the sandbox attribute. Am I doing something wrong? Installing NoScript and telling my browser not to run JavaScript from the target site makes everything work fine, but obviously I don't want Firefox users to have to install an addon before my site will work.

If you are manipulating or setting the sandbox attribute after the iframe is in the DOM, it will completely ignore the setting. You must set it before the iframe element is added to the DOM.

Access contentWindow of iframe with blank src in ie9 on Twitter

I'm trying to access the inside of a dynamically inserted iframe (inserted from a script that was loaded from a different domain than the host page) in ie9 on twitter.com so that i can write content into it. I tried setting the src to both '' and about:blank. Accessing the contentDocument throws an Access denied error, and accessing the contentWindow returns nothing. Why is this and is there a way around it? It works in other browsers, but for some reason is seems that Twitter might be doing something to prevent this and I'm curious as to what it is.

I use the following and I believe it works on all browsers that support iframe.
var iframe = document.createElement("iframe");
document.body.appendChild(iframe);
var iframeDoc = iframe.contentWindow.document;
iframeDoc.open();
iframeDoc.write(html);
iframeDoc.close();
I don't set #src at all.

location.hash inside iframe not working on Firefox

I'm trying to display an HTML5 slideshow inside an iframe (based on Google's html5slides). The current slide number is set in the URL hash to be able to directly jump to it.
But it doesn't work in Firefox. The tricky part is that I populate the iframe's content using javascript, so my iframe doesn't have a src attribute. When I load my slideshow's code in the iframe, it is correctly displayed on Chrome, Opera, Safari, even IE9. But on Firefox it loads for a split second then loads my parent page inside the iframe.
I suspect that setting the hash inside the iframe doesn't work in firefox because I have no src attribute (I tested with an empty src attribute and it's the same)
So is there another way to set the url's hash of an iframe in javascript that would work with firefox?
You can see the bug in firefox if you paste this page content's in jsbin.com with real-time preview: http://html5slides.googlecode.com/svn/trunk/template/index.html
In firefox jsbin will load itself inside the preview iframe.