I'm practicing navigating the DOM with Javascript and running into an issue. I'm aware of cross site scripting is not allowed, but I have a question.
I can post the HTML code if need be, but for the moment had a simple question.
When I run
iframe_dom = document.getElementsByTagName('iframe')[0]
console.log(iframe_dom)
This is what's printed out (abbreviated version)
<iframe style="width:100%;height:100%;"> .... </iframe>
#document
<html>
<head>..</head>
<body>
<iframe>...</iframe>
That's what I expected. However, when I try to navigate the tree by putting in:
iframe_dom.iframe
undefined is returned.
If I've passed the body of iframe into a a variable, why can't I navigate the tree?
How is not entirely consistent across browsers, and if you're executing your script on load, it may not be available yet.
Check out the Plunker below. I built it based on this: http://xkr.us/articles/dom/iframe-document/
function getChildTitle() {
var oIframe = document.getElementsByTagName('iframe')[0];
var oDoc = (oIframe.contentWindow || oIframe.contentDocument);
if (oDoc.document) oDoc = oDoc.document;
console.log(oDoc.body.getElementsByTagName('h1')[0].innerHTML);
}
In short, from the iframe element, sometimes you want the contentDocument property, sometimes contentWindow property - depending on browser. Take whichever one exists (or isn't falsey, in the code). In some browsers you may need to use that object's document property.
http://plnkr.co/edit/cSRD0qh5kntYR6aS8f1H
I am creating an object element dynamically in jQuery, to render some content. It works in all browsers except IE8.
The code:
j$(document).ready(function(){
j$('.objContainer').html(j$('<object>').attr(
{'data':'http://www.stackoverflow.com',
'type':'text/html'}));
});
The HTML structure created after the execution(in IE8):
<object type="text/html"></object>
In other browsers[IE9, Firefox, Chrome]:
<object data="http://www.stackoverflow.com" type="text/html"></object>
Any solutions?
Works for me: using the IE8 developer tools, I can see the data attribute. Here's a screenshot.
(I know I shouldn't have to say it, but: you need to make sure that you're allowing scripts to run.)
as you see here, data (dataset) is not supported by IE.
What you can do is rename data to data-foo and then $(..).data("foo") will work
even in IE because of a special handling by jquery itself.
This is a way to bypass dataset limitation for IE.
It should work fine, Though i recommend you use $.data() method
http://api.jquery.com/jQuery.data/
It is much safer, and jQuery ensures that the data is removed when DOM elements are removed via jQuery methods.
Example:
<object id='myObj' data-url="http://www.stackoverflow.com" type="text/html"></object>
And you can read the value like:
var url = $('#myObj').data('url');// Read the value
$('#myObj').data('url', 'some-other-value');// Set a new value
This following Code Running in FF & IE
TempNode= CKEDITOR.dom.element.createFromHtml("<span></span>");
TempNode.setHtml("<p>test</p>");
But below mentioned code losing user defined Tags In IE (FF Works Fine)
TempNode= CKEDITOR.dom.element.createFromHtml("<span></span>");
TempNode.setHtml("<myTag>test</myTag>");
Also same problem with *appendHtml()*
My Exact Requirement is :
Element.setHtml(AnotherElement.getHtml());
original value in AnotherElement.getHtml() is:
<P><mytag id="test_39878" data-cke-expando="undefined">some. text</myTag></P>
after Element.sethtml() it containing value is :
<P>some. tex</MYTAG></P>
If you want to use your own tags in IE you've got to create them first. This is the same situation that we've got with HTML5 tags.
So before setting HTML with <myTag>, create it CKEDITOR.document.createElement( 'mytag' ) just to let IE know it exists.
BTW. Remember that elements must be created in the same document in which they'll be used. So if you want to insert them into editor's content, then create them in editor's document (e.g. CKEDITOR.instances.editor1.document). Otherwise IE will throw an error.
I have a html page in which I have two framesets each pointing to different html.
Now let's say, I have a textbox in first frameset (html) and a button in my second frameset (html).
Could anyone please let me know how to hide textbox when I click the button?
not tested, but it should be like this (in the onclick-handler of your button):
parent.frames[1].document.getElementByid('mytextfield').style.display = 'hidden';
// ^^^ here you could also access the frame by its name using ['mysecondframe']
you can do all of the above only if the two frames are in the same domain. Due to browsers security policies, if the frames aren't on the same domain and even on the same protocol, they cannot interact with each other ( javascript is out of the question ).
You can access the element via the getElementById function on the document object of the frame in question (note that we use the target frame's document, not our own). You can get the frame from the frameset by name — frame names become properties of the frameset's window object.
Example (live copy; button frame code):
var textbox = parent.targetFrame.document.getElementById('theTextBox');
textbox.value = "You clicked at " + new Date();
...where targetFrame is the name of the target frame. You can also use frames[n] where n is the index of the frame in the frameset, but I find names more robust.
The above example is tested and works on Firefox, Chrome, and Opera for Linux and IE6 — and so should work on a broad set of browsers.
How exactly does it relate to jQuery? I know the library uses native javascript functions internally, but what exactly is it trying to do whenever such a problem appears?
It means you've tried to insert a DOM node into a place in the DOM tree where it cannot go. The most common place I see this is on Safari which doesn't allow the following:
document.appendChild(document.createElement('div'));
Generally, this is just a mistake where this was actually intended:
document.body.appendChild(document.createElement('div'));
Other causes seen in the wild (summarized from comments):
You are attempting to append a node to itself
You are attempting to append null to a node
You are attempting to append a node to a text node.
Your HTML is invalid (e.g. failing to close your target node)
The browser thinks the HTML you are attempting to append is XML (fix by adding <!doctype html> to your injected HTML, or specifying the content type when fetching via XHR)
If you are getting this error due to a jquery ajax call $.ajax
Then you may need to specify what the dataType is coming back from the server. I have fixed the response a lot using this simple property.
$.ajax({
url: "URL_HERE",
dataType: "html",
success: function(response) {
$('#ELEMENT').html(response);
}
});
Specifically with jQuery you can run into this issue if forget the carets around the html tag when creating elements:
$("#target").append($("div").text("Test"));
Will raise this error because what you meant was
$("#target").append($("<div>").text("Test"));
This error can occur when you try to insert a node into the DOM which is invalid HTML, which can be something as subtle as an incorrect attribute, for example:
// <input> can have a 'type' attribute
var $input = $('<input/>').attr('type', 'text');
$holder.append($input); // OK
// <div> CANNOT have a 'type' attribute
var $div = $('<div></div>').attr('type', 'text');
$holder.append($div); // Error: HIERARCHY_REQUEST_ERR: DOM Exception 3
#Kelly Norton is right in his answer that The browser thinks the HTML you are attempting to append is XML and suggests specifying the content type when fetching via XHR.
It's true however you sometimes use third party libraries that you are not going to modify. It's JQuery UI in my case. Then you should provide the right Content-Type in the response instead of overriding the response type on JavaScript side. Set your Content-Type to text/html and you are fine.
In my case, it was as easy as renaming the file.xhtml to file.html - application server had some extension to MIME types mappings out of the box. When content is dynamic, you can set the content type of response somehow (e.g. res.setContentType("text/html") in Servlet API).
You can see these questions
Getting HIERARCHY_REQUEST_ERR when using Javascript to recursively generate a nested list
or
jQuery UI Dialog with ASP.NET button postback
The conclusion is
when you try to use function append, you should use new variable, like this example
jQuery(function() {
var dlg = jQuery("#dialog").dialog({
draggable: true,
resizable: true,
show: 'Transfer',
hide: 'Transfer',
width: 320,
autoOpen: false,
minHeight: 10,
minwidth: 10
});
dlg.parent().appendTo(jQuery("form:first"));
});
In the example above, uses the var "dlg" to run the function appendTo.
Then error “HIERARCHY_REQUEST_ERR" will not come out again.
I encountered this error when using the Google Chrome extension Sidewiki. Disabling it resolved the issue for me.
I'm going to add one more specific answer here because it was a 2 hour search for the answer...
I was trying to inject a tag into a document. The html was like this:
<map id='imageMap' name='imageMap'>
<area shape='circle' coords='55,28,5' href='#' title='1687.01 - 0 percentile' />
</map>
If you notice, the tag is closed in the preceding example (<area/>). This was not accepted in Chrome browsers. w3schools seems to think it should be closed, and I could not find the official spec on this tag, but it sure doesn't work in Chrome. Firefox will not accept it with <area/> or <area></area> or <area>. Chrome must have <area>. IE accepts anything.
Anyway, this error can be because your HTML is not correct.
I know this thread is old, but I've encountered another cause of the problem which others might find helpful. I was getting the error with Google Analytics trying to append itself to an HTML comment. The offending code:
document.documentElement.firstChild.appendChild(ga);
This was causing the error because my first element was an HTML comment (namely a Dreamweaver template code).
<!-- #BeginTemplate "/Templates/default.dwt.php" -->
I modified the offending code to something admittedly not bulletproof, but better:
document.documentElement.firstChild.nodeType===1 ? document.documentElement.firstChild.appendChild(ga) : document.documentElement.lastChild.appendChild(ga);
If you run into this problem while trying to append a node into another window in Internet Explorer, try using the HTML inside the node instead of the node itself.
myElement.appendChild(myNode.html());
IE doesn't support appending nodes to another window.
This ERROR happened to me in IE9 when I tried to appendChild an dynamically to a which already existed in a window A. Window A would create a child window B. In window B after some user action a function would run and do an appendChild on the form element in window A using window.opener.document.getElementById('formElement').appendChild(input);
This would throw an error. Same with creating the input element using document.createElement('input'); in the child window, passing it as a parameter to the window.opener window A, and there do the append. Only if I created the input element in the same window where I was going to append it, it would succeed without errors.
Thus my conclusion (please verify): no element can be dynamically created (using document.createElement) in one window, and then appended (using .appendChild) to an element in another window (without taking maybe a particular extra step I missed to ensure it is not considered XML or something). This fails in IE9 and throws the error, in FF this works fine though.
PS. I don't use jQuery.
Another reason this can come up is that you are appending before the element is ready e.g.
<body>
<script>
document.body.appendChild(foo);
</script>
</body>
</html>
In this case, you'll need to move the script after the . Not entirely sure if that's kosher, but moving the script after the body doesn't seem to help :/
Instead of moving the script, you can also do the appending in an event handler.
I got that error because I forgot to clone my element.
// creates an error
clone = $("#thing");
clone.appendTo("#somediv");
// does not
clone = $("#thing").clone();
clone.appendTo("#somediv");
Just for reference.
IE will block appending any element created in a different window context from the window context that the element is being appending to.
e.g
var childWindow = window.open('somepage.html');
//will throw the exception in IE
childWindow.document.body.appendChild(document.createElement('div'));
//will not throw exception in IE
childWindow.document.body.appendChild(childWindow.document.createElement('div'));
I haven't figured out how to create a dom element with jQuery using a different window context yet.
I get this error in IE9 if I had disabled script debugging (Internet Explorer) option. If I enable script debugging I don't see the error and the page works fine. This seems odd what is the DOM exception got to do with debugging either enabled or disabled.