SVG inside an HTML-Object - javascript

I have built a website with 2 SVG-files, each one inside an object tag.
Chrome returns 'null' when I try to access the SVG-Root element with .getSVGDocument() and also with .contentDocument (!). In Opera I have the same problem. In Firefox and Safari it works.
I heard that Chrome denies access to external files by default, for security reasons. Hence, the only way to solve the problem is to put the SVG-Code inline HTML !? Or is there another option?
Thanks for your hints!
Kind regards,
Codebastler

Related

How to hide html source code? Even when viewing source?

I found this website https://samy.pl/ and even with my HTML knowledge I can't find the source of his site?
If you type "view-source:" before the website it should bring up the source but it doesn't?
He blocked most or all ways to inspect his source.
How is this possible?
You can actually see the sourcecode using Internet Explorer, or Safari with IE 11 set as useragent.
I'm not certain how he does it, but it is some kind of JavaScript that checks some flag in Chrome that tells him whether or not the inspector is open, and if true he removes the body and updates page so everything disappears.
Using IE and inspecting the source should give you the answer :)

Getting local html inside another local html with JavaScript

I have got one html file in my PC that I use for work and I want to load another local html file to it, I want it to be loaded inside one div. <div id="loadHere"></div>
I used this jquery function but it's not working $("#loadHere").load("001.html")
When I do that I get this error:
XMLHttpRequest cannot load file:///C:/Users/**censored**/Desktop/**censored**/html/00.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
jquery.min.js:132 Uncaught TypeError: Cannot read property 'responseText' of null
I understand that this is done because of security and there is propably no safe way to turn it off (for example for one folder).
So I was thinking about alternative solution, what if I had some drag&drop space on my main html file, where I could just drag and drop local html file that I want to load inside <div id="loadHere"></div>.
Is that possible? If yes, where should I start? Is there some framework for that? My idea was that after I would drop that file on drag&drop area it would get saved in some variable and with that variable it would be really easy to load it inside that div.
Thanks and have a nice day.
Best and easiest way to use iframe:
<iframe id="loadHere" src="001.html"></iframe>
At chromium / chrome browsers , try adjusting launcher to
chromium
/path/to/chromium-browser --allow-access-from-files
chrome
/path/to/google-chrome --allow-file-access-from-files
See
How do I make the Google Chrome flag “--allow-file-access-from-files” permanent?
List of Chromium Command Line Switches
Easiest workaround that works with any browser - just load it in an iframe instead of a div:
<iframe id="loadHere" src="loadHere.html"></iframe>
OR set src with JS:
document.getElementById('loadHere').src = "something.html";

Printing a PDF in an iframe using JavaScript in Firefox

I was wondering if it is possible to print the data of an object tag in html? For example I have an object like this:
<object id="myObject" data="myPDF.pdf"></object>
I have a PDF embedded in the object tag. I need to be able to print the PDF using a JavaScript function in Firefox. Placing the PDF in an iframe and printing does not work as Firefox will not let you access the frame's contents. Neither does using:
myObject.contentWindow.print();
or
document.getElementById("myObject").print();
Does anyone have any other suggestions? I am trying to figure out a way of printing just the data of the object (i.e. the PDF file) but have not found a solution so far. Using an iframe works for chrome and using an embed tag works for Internet Explorer, but I cannot find anything that will work in Firefox. Any help is much appreciated, thanks.
Unfortunately as #yms said in the comments this is a bug in Firefox and there is no workaround for it yet. You can read the bug report here. There does not seem to be any progress on a fix but I will update this answer as soon as I hear of one.

Create a <noscript> element with content fails on IE7 and IE8 (jQuery)

I've seen several threads about reading contents, but nothing on writing to noscript.
$('body').append('<noscript><div></div></noscript>');
In Chrome and IE9 I get a noscript-element with a empty div inside like I expect, but in IE7 and IE8 I just get a empty noscript-element without the div inside.
Example: http://jsfiddle.net/cEMNS/
Is there a way to add HTML inside the noscript-tag that works in all browsers? What I need is to add some tracking code into a noscript-element at the end of the page, but the info I need isn't available until after document ready.
Edit: I'm getting a lot of comments on "why". It's some poorly done tracking library that requires this. We don't have access to the code to change it. Regardless, I find it interesting that it works in some browsers and not in others since jQuery was supposed to work equally in all browsers. Is it simply a bug?
Edit2: (2 years later) Adding a noscript on the browser doesn't make sense, I know. My only excuse not the question the task I had was because of lack of sleep, like everyone else in the project. But my rationale was that jQuery should behave the same on all browsers and someone might want to do this on the server.
Regardless of the tracking code, what you are doing (or are required to do) makes no sense!
Why? There are two cases possible here:
user has JavaScript enabled in which case the NOSCRIPT get's inserted into the DOM but is ignored by the browser (does nothing)
user does not have JavaScript enabled, NOSCRIPT does not get inserted and does not "execute"
The end result of both cases is that nothing actually happens.
Just an idea: You could try giving your noscript tag an ID, and then try to use native js.
for example:
$('body').append('<noscript id="myTestNoScript"></noscript>');
document.getElementById('myTestNoScript').innerHTML = '<div></div>';
I would claim that if it does not work with native js, it will not work with any library (feel free to correct me on this one).
I tried following simple HTML code:
<html>
<body>
<noscript>I'm a noscript tag.</noscript>
</body>
</html>
Then I did analyse this with IE8 (in IE7 mode) and his integrated code insprector. Apparently the IE7 checks are script allowed. If so he declared it as empty. And empty tags will be ignored. Unfortunatly I could not try that with disabled script option, because only the Systemadministrator can change the settings (here at my work).
What I can assure you, the noscript does exists. If you add
alert($('noscript').size());
after the creation, the result will be 1.

Iframe with autoheight

i need to autoheight an iframe with a cross domain src, i tried with javascript, but I get an "Access Denied" when I try to get the height of iframe contentWindow. anyone knows any method?
ItzWarty is right: the parent page cannot communicate with the child document, even to find out its height. Back in 2008, Michael Mahemoff posted a detailed overview of Cross-Domain Communication with IFrames that may provide you with some guidance.
Hope is on the way, however - HTML5 includes an improvement to this situation called "Cross-document messaging" that is supported in Firefox 3, Safari 4, Chrome 2, Opera 9.2 and even IE... 8. If your users are using only those supported browsers, you could use it.
Perhaps you could set the "scrolling" attribute on the IFRAME element to "auto" by default and test for window.postMessage - if it succeeds, set "scrolling" to "no" and use a function to size the IFRAME accordingly.
I recently dealt with a similar issue (parent page from domain.tld framing a page on blog.domain.tld) but I was able to use "the old document.domain hack" that Mahemoff described to get by, although it's not supported in Opera.
Good luck.
If you created a proxy on your server that fetched the content, JavaScript wouldn't have this restriction.
The domain issue is only one problem you face - IE8 is the other. Even if you can access the iframe, IE8 cannot accurately retrieve the body.clientHeight info. Firefox works tho...

Categories

Resources