I am trying to load an SVG file into a HTML page by first including the page in the HTML header:
<link rel="import" href="/views/Diagram.svg" />
then executing the following script:
var link = document.querySelector('link[rel="import"][href="/views/Diagram.svg"]');
var data = link.import;
document.getElementById("svg-diagram").innerHTML = data;
Even though the svg is valid (can be displayed), the imported data object contains a parseerror and the svg is not added to the page. I can add the svg using ajax, but since it is to be loaded multiple times, I'd prefer to pre-load it. How can I fix the code?
Instead of doing
document.getElementById("svg-diagram").innerHTML = data;
try
document.getElementById("svg-diagram").appendChild(data.documentElement);
The reason is because data.documentElement is an DOM node object while data is a document object.
Here's what is in the data object
Here is what we are going to make use of
appendChild was used instead of innerHTML because innerHTML expects a string while appendChild can make use of a node object
Related
I have tried to create my first One Note Add In using the JavaScript API. I have tried the example in the MS documentaion (Build your first OneNote task pane add-in). This one works.
Now I want to try to change the formatting of an element in the document. For example I want to change the font colour of a text. However, I have not yet found a way to access the elements in a document.
Can I access elements in a document via a JS Add In to change their "style" property?
How can I do that?
Thanks
Micheal
Finally, I found a way to access the OneNote page content from the JS Add In. You can load the page content using
var page = context.application.getActivePage();
var pageContents = page.contents;
context.load(pageContents);
Now you have access to the page content in the qued commands.
return context.sync().then( function() {
var outline = pageContents.items[0].outline;
outline.appendHtml("<p>new paragraph</p>");
var p = outline.paragraphs;
context.load(p);
...
});
So consequently you can access element by element in document the hirarchy.
I load a SVG file from an object tag and access its content from a JavaScript.
$(document).ready(function() {
$(window).load(function () {
var a = document.getElementById("svgObj");
var svgDoc = a.contentDocument;
// Do something on svgDoc
});
});
This works fine when I explicitly have a tag in a html page. When I dynamically create an object tag in JavaScript, "svgDoc" is null and I can seem to get contentDocument of the loaded object tag. I've tried using the timer to wait until svg file gets loaded but resulted in getting null object. Is it possible to get "contentDocument" by dynamically creating an object tag and loading svg file on the fly?
http://jsfiddle.net/katakuri/05doayb5/
Thanks,
katakuri
The problem is CROSS-DOMAIN,
because the SVG file is in other domain
Get DOM content of cross-domain iframe
As this answer indicates, a good way to parse HTML in JavaScript is to simply re-use the browser's HTML-parsing capabilities like so:
var el = document.createElement( 'html' );
el.innerHTML = "<html><head><title>titleTest</title></head><body><a href='test0'>test01</a><a href='test1'>test02</a><a href='test2'>test03</a></body></html>";
// process 'el' as desired
However, this triggers loading extra pages for certain HTML strings, for example:
var foo = document.createElement('div')
foo.innerHTML = '<img src="http://example.com/img.png">';
As soon as this example is run, the browser attempts to load the page:
How might I process HTML from JavaScript without this behavior?
I don't know if there is a perfect solution for this, but since this is merely for processing, you can before assigning innerHTMl replace all src attributes to be notSrc="xyz.com", this way it wont be loaded, and if you need them later in processing you can account for this.
The browser mainly will load images, scripts, and css files, this will fix the first 2, the css can be done by replacing the href attribute.
If you want to parse HTML response without loading any unnecessary resources like images or scripts inside, use DOMImplementation’s createHTMLDocument() to create new document which is not connected to the current one parsed by the browser and behaves as well as normal document.
I am trying to override some JavaScript code to optimize an existing solution of which I do not have access to the original source code. It is a Liferay based portal with some portlets that render an SVG image. The SVG is used as a graphical navigation element which can be used to drill down into a technical service model. The loading and refreshing of the SVG image can be slow because of the way it has been implemented. The SVG disappears for a couple of seconds because the refresh actually does 2 requests to the webserver. At first the complete object tag is regenerated server side and re-inserted in the dom.
The response of the first request looks like this:
<div><object type="image/svg+xml" data="generateSvg.svg” width="100" height="300" name="svgId"> <param name="wmode" value="transparent"></object></div>
The actual request of the SVG starts by the time the first response text is inserted into the DOM and the original object tag is removed. Because the SVG images can get quite complex and some general slowness of the software the SVG disappears and returns by the time it is received and rendered by the web-browser.
I would like to skip the first step and make sure the image does not “blink” by refreshing the SVG asynchronously. Using jQuery I am able to override the original JavaScript code and get the url of the SVG and do a jQuery ajax request. I am also able to insert the results in the DOM but when I insert it as an inline SVG the image is rendered different then when it is embedded in an object tag.
Some parts of svg content elements are cut off and this does not happen when the SVG is added as an object tag with an external url.
I either would like to embed the SVG in an object tag and load its url asynchronously or find a fix for the rendering problems of the inline SVG. I cannot change the SVG code since it is part of the existing software. I there a way to add the asynchronous loaded data to an object tag without adding the url to the data attribute?
My javascript for adding the SVG looks like this:
indentifier.loadSvg = (function(){
if(this.svgUrl){
$.ajax({
url: this.svgUrl,
//enclose the right div in which the svg should be loaded as a context
context: $('#_layout_WAR_Portlets_INSTANCE_' + this.portalId + '_plugin'),
dataType: 'xml'
}).done(function(svgDoc) {
//construct an svg node and add it to the DOM
var svgNode = $('svg', svgDoc);
var docNode = document.adoptNode(svgNode[0]);
$(docNode).attr('width', '100%').attr('height', '300');
this.html(docNode);
});
}
});
I'm not sure if it's possible inside an object tag but an Iframe should do the trick.
You could try creating a new Object tag with javascript, loading the svg and replacing the old object with the new one.
It would look something like this:
var datasrc = "#";
// Create new object tag
var newobj = jQuery('<obj>', {
id: 'newobject',
data: datasrc,
type: 'image/svg+xml'
});
// Set parameters
jQuery('<param />', {
name: 'src',
value: datasrc
}).appendTo('#newobj');
jQuery('<param />', {
name: 'wmode',
value: 'transparent'
}).appendTo('#newobj');
// Dynamically load content and replace when done
newobj.load(datasrc,function(){
$('#objectwrapper').empty();
newobj.appendTo('#objectwrapper');
alert("succes"); // Just to check if this works!
});
JSFiddle: http://jsfiddle.net/cfERU/9/
The alert wil fire twice, I believe this is a JSFiddle thing.
This is a follow up to a question asked before at: How to access SVG elements with Javascript
However, the solution does not seem to work for me. I am testing on the latest version of Chrome. I have a map of the US as an SVG file, which I have downloaded on my machine and made some changes to the xml code.
I have the svg embedded using the object tag and assigned an id of "USAsvg" and am proceeding with baby-steps first. For a button onclick event I am executing the following code without success. Here 'CA' is a state declared using the path tag within the svg file.
var a = document.getElementById('USAsvg');
var svgDoc = a.contentDocument;
var delta = svgDoc.getElementById('CA');
alert(delta.value);
this works in the latest chrome,
load the SVG into your DOM directly, then manipulate it as if it were a normal html node,
the html() function in jQuery does not work, use text() instead.
$('.your_div_for_svg').load('svg/file.svg', function(){
$('#some_textnode_w_id_within_svg').text('Hello word');
});