Develop Reference

A hyperlink download attribute not working

so i have this problem with hyperlink attribute download. basically i have link that download a certain file. however it doesnt work..
download file
With this format, it will download the file but it will give me an failed file says 'no file'.
On the other hand if i have link that has a complete uri format:
download file
It redirects me to the page and it will just show the file. The weird
thing is when I tried it on mozilla and brave browser. it works. but
in safari, and my default is google chrome. its not working..
Am I missing something? maybe in my header? really appreciate if you can help.. thanks!
EDITED
also, i've read this stuff about content disposition, so how do i know that my webpage set as inline for that matter.

it turns out, my problem is conflicted by same origin urls. Apprently, I am rquesting from different hosts/site, for further explanation see : https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy

If you look at here https://www.w3schools.com/TagS/tag_a.asp
Scroll down to attributes, and you will see that the DOWNLOAD attribute is only supported by HTML5, which, as it seems, your friend's version of Safari does not support. I recommend updating the program.
Alternatively, you can right-click on the download link, then click Save As..., then download it that way.

This may also be caused js intercepting navigation and redirecting. If so, you may be able to work around it by adding a target attribute.
download file.txt

SVG inside an HTML-Object

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

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.

communication between an iframe and the page its part of through javascript in ie8

I have seen many questions like this but have not found anything that seems to help with my specific situation so I apologize if this question seems repetitive.
I have a site www.foo.com and have an iframe in it. When information I click on an a tag in foo.com a javascript function is called that passes a new image to the iframe to show the user. The communication between iframe and its "parent" seems to work fine on all browsers EXCEPT RANDOM IE8 PAGES. I get the following error message "access is denied" and the browser points to the function that has been activated. Following is a piece of code from the site to see how it works.
the iframe:
<iframe scrolling="no" src="foo.com/bar" id="ifram" name="ifram"></iframe>
the a tag:
The javascript:
if($(this).val() == '242'){
document.getElementById('ifram').style.border='0px';
document.getElementById('ifram').style.background = "url('../product_images/uploaded_images/Flag.jpg')";
document.frames.ifram.document.body.style.backgroundColor="transparent";
This is just a snippet of a code and does not include the whole process of the ajax call to get the image but was not sure if the ajax is part of the issue. I get an undefined error in firefox but the function still fires . I am assuming I would just need to use window.frames for firefox.
Overall, any help on how to resolve this issue would be appreciated. I am wondering if there is a security issue that has to do with browser settings or if its part of how I coded.
Thanks in advance

It's important to note that if your iframe tag is on a page located at http://www.foo.com but the iframe points to http://foo.com it's considered a sandboxing violation and you'll get access denied. Make sure you're pointing to the same domain as your page is on. You can use relative URLs in the iFrame src tag, too, so you can change it to src="bar.php" (without any domain information).

You dont need to use document.frames before document.frames.ifram.document.body.style.backgroundColor = "#ccc";. Just ifram.document.body.style.backgroundColor = "#ccc"; will do.

Why does the Chrome Developer Tools/Console does not show javascript files/error that were loaded dynamically?

I'm loading files using a require function inside my code, which adds a <script/> tag to the body of the page with the relevant attributes.
The scripts are loading just fine and they are accessible, but if I have an error in one of them, it never shows in the console, and I don't have them showing in the Scripts tab inside the developer tools, essentially robbing me of the debugging capabilities.
What am I doing wrong?
My require function looks like so:
require: function (moduleId) {
var filename = this.config.modulesDir + '/' + moduleId + '/module.js';
var script = $('<script></script>').attr({
'src': filename,
'type': 'text/javascript'
}).appendTo('#Scripts');
}

This works just fine with latest version of Chrome (15.0.874.121). I did setup a jsfiddle example and you can clearly see it works :
http://jsfiddle.net/Tgax4/
There are two possible solutions to your problem :
Chrome is not up to date on your workstation. Update it.
You require scripts that does not exists, and that's why they are not listed. Ensure you have the correct location.
In the second case, chrome should tell you in the console that the script does not exists, so I'm pretty sure it has something to do with older chrome version.

Have you considered using a library like require.js (http://requirejs.org/) to handle your dependencies?
Using it I never had problems debugging in dynamically loaded scripts.

EDIT: nevermind, that was just JSFiddle, wanting the slash to be escaped. Having it escaped made it work for me. So I don't think the error is in your function. Maybe you provide us with some more information.
Could you try replacing
$('<script></script>')
with
$('<script>')

Make sure that you are displaying scripts from frame you are in inside devtools. If you load scripts inside iframe then you should select this frame in chrome inspector as current environment to show scripts from this frame. At the left bottom corner of chrome devtools right next to buttons is small select which gives you possibility to change current frame (default is ). Try to select other frame and check if then scripts will show in script selector on Scripts tab.
And also if you can not see errors, check if next to mentioned select at the bottom you have selected proper level of logging - try to select button 'All', and check if then you will see any errors.