I am trying to use Mozilla's documentation about removing xml dataislands. The code from the same is failing for weird reasons. Here is the link. https://developer.mozilla.org/en/docs/Using_XML_Data_Islands_in_Mozilla
Exact code
`<!DOCTYPE html>
<html>
<head>
<title>XML Data Block Demo</title>
<script>
function runDemo() {
var doc = document.getElementById("purchase-order").contentDocument;
var lineItems = doc.getElementsByTagNameNS("http://example.mozilla.org/PurchaseOrderML", "lineItem");
var firstPrice = lineItems[0].getElementsByTagNameNS("http://example.mozilla.org/PurchaseOrderML", "price")[0].textContent;
document.getElementById("output-box").textContent = "The purchase order contains " + lineItems.length + " line items. The price of the first line item is " + firstPrice + ".";
}
</script>
</head>
<body onload="runDemo()";>
<object id="purchase-order" data="purchase_order.xml" type="text/xml" style="display: none;"></object>
<div id="output-box">Demo did not run</div>
</body>
</html>
In this code, var doc = document.getElementById("purchase-order").contentDocument; line is causing the error object does not support contentDocument property in both Chrome and IE.
What am I possibly missing here?
Edit:
I found the issue with IE. IE does not support this property in compatibility mode. Removed the compatibility mode and it works fine now.
But same thing still fails in Chrome. I don't think there is a compatibility mode enabled in chrome. So no idea why chrome is failing.
Edit:
This was supposed to be in continuation of the methods I was trying to remove XML dataisland. I think, updating the old question is a better idea.
Related
I have a very simple script(setUser) which is called on click of a button.This script is working fine in chrome but in IE 11 i am getting a console error.
Another weird thing is i am getting that error only when dev tool is open.It works fine if devtool is not open.
Error is :-
SCRIPT5009: 'id' is undefined
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function setUser(eventType){
console.log(eventType);
}
</script>
</head>
<body>
<button id="vish" onclick="setUser(id)" style="height:40px;width:200px">Click Me</button>
</body>
</html>
Simple Workaround for this is to declare a
var id; just below the script.But i need the proper documented reason why this doesnot work in ie11 but same works in chrome.And is a better solution than what i tried
Workaround :- by adding var id at the top
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
var id;
function setUser(eventType){
console.log(eventType);
}
</script>
</head>
<body>
<button id="vish" onclick="setUser(id)" style="height:40px;width:200px">Click Me</button>
</body>
</html>
expected :-
when dev tool is open in ie11 and when we click the button we should get the console log as "vish"
actual result :-
SCRIPT5009: 'id' is undefined js error
id is simply undefined, as the error message says. If you declare it, the error is gone, but it won't behave like you expected. If you declare it, it exists with value undefined. You probably wanted
onclick="setUser(this.id)"
this.id means the button context, while simply id tries to find it in global context. In case of your error, id is not declared, whereas
var id; // or var id=undefined;
declares it, and leaves it undefined, so the browser at least knows it is a variable. By saying id is undefined Explorer means it is not declared.
I believe the reason is that the browser searches for variables and named elements (referenced by name or id attribute; this is not standard, but browsers do it), which actually doesn't exist in global context and are looked up by reference and Explorer obviously can't handle this situation. If it is declared as var, javascript knows it is not a named element reference.
Example below shows the non-standard behaviour: it should end with error test is not defined (it really is not), but browsers say hello.
<input id="test" value="hello">
<script>
alert(test.value);
</script>
The cause of it not working in IE11 is because you do not specify a doctype for the HTML document in the block of code that threw the error.
If I add <!DOCTYPE html> to the start of the HTML, as in the workaround you show; it works in IE11 as well for me, without adding the var id;
The exact reason is unknown to me, but without the doctype, IE will run the page in quirks mode. And that seems to mess up the determination of the function scope when the browser tries to parse onclick="setUser(id)" into valid JS code.
This would not happen if the doctype is correct and the page can hence be run in the correct mode.
This would also no happen if the browsers HTML engine did not have to parse the HTML string setUser(id) into valid JS code before it can be used. Hence it's not a common issue anymore since the standard these days is to not use inline event handler attributes on HTML tags.
So prefer explicit event binding with javascript when possible to not run into issues like this, where a totally unrelated part, the doctype, messes up your code.
Using onclick="setUser(this.id)" should work.
However, a cleaner workaround would be to do all the onclick handling in JavaScript:
onload = function() {
var buttons = document.getElementsByTagName("button");
for(var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function() {
console.log(this.id);
}
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button id="vish" style="height:40px;width:200px">Click Me</button>
<button id="vish2" style="height:40px;width:200px">Click Me 2</button>
</body>
</html>
having a bit of an issue here. I have this code:
//phoneNumber is a string ie ('01☂916☂5234321')
var phoneNumberSplit = phoneNumber.split('☂');
console.log(phoneNumberSplit);
//in Chrome this returns as ["01", "916", "5234321"], in Firefox this returns as
//[ "01☂916☂5234321" ]
I later call phoneNumberSplit[1] which in Chrome is fine, but in Firefox it says it's undefined. Why does string.split return two different things depending on which browser I'm in? The documentation says that it works in both Firefox and Chrome. Any help?
edit oooook I figure out what my issue was. On the page I was testing this on the charset="UTF-8" was missing from the meta tag and wasn't reading the unicode character. In Chrome I guess they have UTF-8 on by default and in Firefox they do not, or something. Whoops.
I figured out what my issue was. On the page I was testing this on the charset="UTF-8" was missing from the meta tag and wasn't reading the unicode character. In Chrome I guess they have UTF-8 on by default and in Firefox they do not, or something. Whoops.
The meta tag is required to tell the browser the character encoding. Firefox 39 did give the correct result but also a warning in the console that the character encoding was incorrect. Try this code with the meta tag included/removed to see the difference.
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
</body>
<script>
//phoneNumber is a string ie ('01☂916☂5234321')
var phoneNumber='01☂916☂5234321';
var phoneNumberSplit = phoneNumber.split('☂');
console.log(phoneNumberSplit);
//in Chrome this returns as ["01", "916", "5234321"], in Firefox this returns as
//[ "01☂916☂5234321" ]
</script>
</html>
Trying to run a following simple code on IE11 browser:
<!DOCTYPE html>
<html>
<head>
<title>Popup Example</title>
<script>
function ButtonClick2() {
var thewin = window.open("http://www.google.com",'thewin','width=400, height=420,status=no');
window.thewin.focus();
}
</script>
</head>
<body>
<button onclick="ButtonClick2()">Click Me!</button>
</body>
</html>
ISSUE:On IE11 it gives the error statement "Unable to get property 'focus' of undefined or null reference"
This answer's late, but I thought that I'd post it just in case somebody came across this question in the future.
According to the answer here: https://stackoverflow.com/a/7025648/1600090,
and my own experience, one possible cause could be that you're trying to open a window in a different internet zone for which Protected Mode is enabled. By default, IE11 enables Protected Mode for the Internet and Restricted zones but disables it for Local Intranet and Trusted Sites. So, for example, if your page (and/or site) are running in your Local Intranet zone and you're trying to open a new window in the Internet zone, window.open is going to return a null reference. If the page/site which is launching the new window is in the Internet zone, in my experience, window.open will return a reference. So, #ssut's example in jsfiddle is going to work because jsfiddle.com and google.com are probably both in the same zone (I'm assuming the Internet zone).
Please check the variable scope. This issue is not browser's problem.
In your code, var thewin = window.open(.. in the ButtonClick2 function, but window.thewin.focus(); is point to window object's thewin variable.
Change the code to thewin.focus(); then it works perfectly.
New code:
PE html>
<html>
<head>
<title>Popup Example</title>
<script>
function ButtonClick2() {
var thewin = window.open("http://www.google.com",'thewin','width=400, height=420,status=no');
thewin.focus();
}
</script>
</head>
<body>
<button onclick="ButtonClick2()">Click Me!</button>
</body>
</html>
I have this problem that I am stuck for several days now. I am trying to append a svg to the DOM. I have custom namespaces in it and when they are added into the DOM and you try to get the innerHTML property of the parent element to which you appended them you get them with some random namespaces. This happens only in IE9.
Example:
$(document).ready(function () {
var svg = '<svg xmlns="http://www.w3.org/2000/svg" ns:attr="val" />';
alert($("div").append(svg).html());
});
The output will be:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:NS1="" NS1:a:b="val" />
Any idea how could this be solved? I've tried to define the namespaces but it's not working again. Here's a jsfiddle link http://jsfiddle.net/RwNqk/3/
Thanks in advance.
First, you have an HTML document—instead of XHTML—in your JSFiddle. HTML does not have custom namespaces, only XML/XHTML has that.
Secondly, you are using a ns namespace prefix without ever defining what that namespace is. It's a wonder that other browsers work at all.
Thirdly, even if you fix these problems, you (unfortunately) can't use jQuery to jam elements into the DOM using previously-defined namespace prefixes:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:foo="hello"><head>
<title>Using jQuery to add namespaced attribute</title>
</head><body>
<div><p foo:bar="yes">one</p></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript"><![CDATA[
var xhtml = '<p foo:bar="no">two</p>';
alert($('div').html());
try{ $('div').append(xhtml); }
catch(e){ alert(e); }
]]></script>
</body></html>
The first alert shows that the custom namespace works:
<p xmlns="http://www.w3.org/1999/xhtml" foo:bar="yes" xmlns:foo="hello">one</p>
The second alert shows the failure:
[Firefox] "An invalid or illegal string was specified" code: "12"
[Chrome] Error: SYNTAX_ERR: DOM Exception 12
[IE9] DOM EXception: SYNTAX_ERR (12)
This has nothing to do with IE9 or SVG. It mostly has to do with jQuery. (You can set the .innerHTML of the DOM element in IE9 and FF and it will work as desired, but not with Chrome.)
This code is the core of a much larger script that works great in almost all browsers. Yet it didn't work in IE. So I've stripped it down and found that the image.onload isn't firing in IE.
I've done some research, and I've guarded against it being an image caching problem. For one, the error occurs first time round before anything is cached, and, more importantly, the onload event is attached before the src.
I'm also reasonably sure I'm attaching the onload event in an IE compatible manner, so what gives, why don't I get an alert?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function generate(){
var imageGen = document.createElement("img");
imageGen.setAttribute('onload',"primer()");
imageGen.setAttribute('src', "http://www.google.co.uk/images/srpr/logo3w.png");
document.getElementById('image').appendChild(imageGen);
}
function primer() {
alert("here now");
}
</script>
</head>
<body onload="generate()">
<div id="image">
</div>
</body>
</html>
I'm hosting a version here
I only have access to IE8 unfortunately, so I don't know if it persists across other versions, even so it needs to be fixed.
First of all, events are not attributes and must not be set using setAttribute. It might, or might not work.
Second, try creating image object instead of image element:
var imageGen = new Image();
imageGen.src = "http://www.google.co.uk/images/srpr/logo3w.png";
imageGen.onload = primer;
document.getElementById('image').appendChild(imageGen);
Live test case - worked fine for me on IE9 and IE9 compatibility mode which should be like IE8.
Can you try imageGen.onload = primer instead of imageGen.setAttribute('onload',"primer()"); ?