Working with embedded SVG in HTML5 I've found strange behavior in Chrome browser. (http://jsfiddle.net/complynx/htp4hqe2/)
For example, in the following html/svg code:
<svg>
<foreignObject>
<body xmlns="http://www.w3.org/1999/xhtml">
<div>foo</div>
</body>
</foreignObject>
</svg>
<script>
var T=document.querySelector("foreignObject");
</script>
Variable T will be null in Chrome (for Firefox works fine).
Any other selectors, even for contents of <foreignObject> work fine.
Is there any tag-specific selector in Chrome for this case?
Upd:
As Rob W mentioned in comments, there is a known bug in WebKit.
Simple, yet in some cases not good workaround.
<svg>
<foreignObject class="ForeignObjectStubClass">
<body xmlns="http://www.w3.org/1999/xhtml">
<div>foo</div>
</body>
</foreignObject>
</svg>
<script>
var T=document.querySelector(".ForeignObjectStubClass");
</script>
Using CSS class instead of tag name is enough
Edit, Updated
Try
var _T = document.getElementsByTagName("foreignObject");
// select `DIV` element within `_T` `HTMLCollection`
var filtered = _T[0].children.item("DIV");
console.log(filtered);
jsfiddle http://jsfiddle.net/guest271314/htp4hqe2/2/
See ParentNode.children , HTMLCollection ; see also NodeFilter
Related
How come this code works smoothly in chrome and not in firefox?
I use SnapSVG.
JS:
var pinguin = Snap("#pinguin");
Snap.load("pinguin.svg", bodyload ) ;
function bodyload( data ){
pinguin.append( data );
};
Html:
<svg id="pinguin" ></svg>
<script src="snap.svg.js"></script>
<script src="main.js"></script>
What I get on Chrome:
What I get on Firefox:
I tried to make a fiddle, but the fiddle doesn't work.
Instead, the code and display can be get here: http://www.pinguin.moe/
Do you know how can I fix the display on Firefox?
I think you need to add a width and height to your outer SVG. There is one in the svg file, but not in the markup on the main page. If you set this to 800,600 for example, it should work.
<svg id="pinguin" preserveaspectratio="xMinYMin meet" viewbox="0 0 300 750" width="800" height="600">
To be specific(MathJax is not what I am looking for)I have a web-page with some MathML in it.The "FireFox" browser parses it fine but when I try to add the same code through javascript,it doesn't parse it.How can I notify the browser to parse the content of the web page again?Even if it is in some other language than javascript
Here is the javascript code:
var b=document.createElement("math");
b.setAttribute("xmlns","http://www.w3.org/1998/Math/MathML");
var msup=document.createElement("msup");
var c=document.createElement("mi");
c.innerHTML="c";
var p=document.createElement("mn");
p.innerHTML="6";
msup.appendChild(c);
msup.appendChild(p);
b.appendChild(msup);
document.body.appendChild(b);
Here is the HTML that it generates
<math xmlns="http://www.w3.org/1998/Math/MathML">
<msup>
<mi>c</mi>
<mn>6</mn>
</msup>
</math>
You need to use document.createElementNS() rather than document.createElement() in order to create the element in the proper namespace. Setting the xmlns attribute after the fact doesn't actually do it. So here is an example that works for me
<!DOCTYPE html>
<html>
<head>
<title>Test adding MathML</title>
</head>
<body>
<script>
var MML = "http://www.w3.org/1998/Math/MathML";
var b=document.createElementNS(MML,"math");
var msup=document.createElementNS(MML,"msup");
var c=document.createElementNS(MML,"mi");
c.appendChild(document.createTextNode("c"));
var p=document.createElementNS(MML,"mn");
p.appendChild(document.createTextNode("6"));
msup.appendChild(c);
msup.appendChild(p);
b.appendChild(msup);
document.body.appendChild(b);
</script>
</body>
</html>
I've also switched your use of innerHTML to use document.createTextNode() for consistency with the way you are creating the other nodes.
I was able to force the rebuilding by setting the innerHTML of a div element :
myDiv.innerHTML = b.outerHTML;
Demonstration (click "Run on JS")
Of course it works only on some browsers.
I am doing this first time. I have created an iframe on my page and I want the text from the iframe through jquery.
Here is my code :
<html>
<head><script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function copyIframeContent(iframe){
var iframeContent = $(iframe).contents(); //alert(iframeContent);
//$("#result").text("Hello World");
$("#result").html(iframeContent.find('body').html);alert(iframeContent.find('body').html());
}
</script>
</head>
<body>
<iframe id="myIframe" onload="copyIframeContent(this);" name="myIframe" src="text.php"></iframe><br />
Result:<br />
<textarea id='result'></textarea>
<input type="button" value="click" id="btn" onclick="aa()">
<script type="text/javascript">
function aa(){ alert("Fdf");
alert(document.getElementById('myIframe').contentWindow.document.body.innerHTML);
}
</script>
</body>
</html>
text.php:
text to change
I tried a lot in all browsers but still this is not working.
Can anyone help me to get this content?
The contentWindow works in both FF and chrome
document.getElementById('myFrame').contentWindow.document.body
Would give you a DOM element body
You can also try something like
window.frames['myIframe'].document.body
That might do the trick for you also
You might have problems with your browsers built in security. If you run this on a local machine. There is a way to disable browsers security.
var content=$("iframe").contents().find('body').html();
alert(content);
Use .contents() to get to iFrame's DOM.
$('#myIframe').contents()
UPDATE:
In the OP:
$("#result").html(iframeContent.find('body').html);
Should say:
$("#result").html(iframeContent.find('body').html());
Doing with jquery will be a little easier:
$('Your Selector', frames['myIframe'].document)
The above example will get anything from myIframe. But the iframe MUST be from the same domain as the parent document. If not from the same domain, a security violation occurs (You can't add content from foreign sites to your page and change that content.)
If no security violation, you can do anything with the selection. For example you can use the jquery append() method to insert new html inside the iFrame, you can use the html() method to replace html or any other function that jquery/pure javascript allows.
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.)
In AppleWebKit based browsers it is observed that changing the data attribute of HTMLObjectElement ( object tag ) does not cause a HTTP request to be sent out to the url and load the resource.
This works perfectly well in FireFox and Chrome but not in Safari and other AppleWebKit browsers
Following is my code. Please suggest a solution how can I dynamically set the data in object tag
<html>
<head>
<script type="text/javascript">
window.onload = function(){
c= document.getElementById('test');
c.setAttributeNS(null,'data','http://myserver.com/SVG/MyImage.svg');
}
</script>
</head>
<body>
<object id="test" data="" type="image/svg+xml" width="320" height="240" />
</body>
</html>
attributes are a nightmare cross-browser, see here-> http://www.quirksmode.org/dom/w3c_core.html#attributes
jQuery implements it will though cross browser -> http://api.jquery.com/attr/