Some Issues with flexible css box model - javascript

I am using flexible css box model in one of my web application. For cross browser compatibility in IE, I am using the flexie.js pollyfill. I have got it working perfectly fine on my local machine as well as on my production environment. However, the problem starts when i try to serve my static files( css, javascript and images) from a subdomain instead of the naked domain. The flexie.js file is loaded in ie, however it doesn't seem to do anything when i serve static content through sub-domain. As soon as i change my config to use naked domain for serving the page, flexie.js renders the page appropriately. I don't see any ajax in play here and all my other script files work perfectly fine when i use the subdomain. I don't think this makes any sense, and am sure there is some other reason for the same.

Seems like a limitation of flexie.js (which gets its CSS parsing from selectivizr) is that the static files and webpage must be on the exact same domain:
http://selectivizr.com/#things
(linked from https://github.com/doctyper/flexie)
Style sheets MUST be hosted on the same domain as the page due to browser security restrictions. Likewise, style sheets loaded using the file: protocol will not work.

Related

Show local pdf inside webapplication [w/o remote server]

I'm developing a HTML5/.net POC in which I have a local HTML5 webapp shown inside a .net (C#) WebBrowser control.
The page is developed in asp.net MVC, downloaded as a single .htm file (using Chrome's SingleFile extension) and saved in a DB (or stored in a filesystem, doesn't matter), loaded and shown inside a .net webbrowser control.
[almost] Everything works: the page is rendered correctly, i can invoke js functions from C#, etc.
But now I have to show some pdf inline inside the page. The pdf is not served from a remote server (there's no server at all), but will be loaded from the filesystem (e.g. a temp file). The idea I have is to make a js function like showPdf(path, pageNum) in the html5 app and call it from .net.
The problem is that it looks there's no way (at least I couldn't find it) to load local pdf, both using Mozilla's pdf.js or html tags, I get "Not allowed to load local resource" in Chrome console/"Access denied" alert in IE.
Is there some kind of component I can try/option I can set to allow the browser to load local pdfs?
The WebBrowser component uses IE to render the page, so maybe some kind of IE option/key registry I can change (the machines that will eventually use this webapp are known, we can configure them as we want)?.
You could try a traditional anchor element (<a href="file:...">) and then enable the File Protocol Navigation feature control for your app. (And, though it may seem obvious, it's probably worth confirming that IE feature controls do not to enable functionality in other browsers.)
I don't know that this would work, but it seems like a possible solution given the question.
Note that accessing file objects may permission to access local file system objects may be disabled by other policies or security measures. More info/research may be needed.
Hope this helps...
-- Lance
I forgot to write here how I solved it:
well, it was a webapp shown inside a WinForm WebBrowser control, so I used this article to call a C# method from JS. The C# method used the default OS pdf reader to show the pdf inside the form.

How to load an html into another html without security warnings

I'm loading (locally) an html into another html using jquery's load command.
However I'm getting the:
XMLHttpRequest cannot load file://path/newcontent.html. Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource.
newcontent.html:
<div>
New Content
</div>
index.html
<div id='putnewcontenthere'>
</div>
I'm using this command:
$("#putnewcontenthere").load("newcontent.html", function() {
//load was performed
});
Now I'm doing this locally without a webserver AND I want to be able to do this "safely" without security warnings AND I don't want to start chrome with disabling security.
I don't need to necessarily use this 'load' command. If there's any other 'hack' my ears are open to any ideas. I'd just like it to work similarly but without security warnings.
Basically, I have a file (locally) and this index.html file is an application that has many screens. I can basically put EVERYTHING into my .html file (and hide/show divs), but I don't want to do this. I want to have a different .html for each one of my screens and load it into the main file programmatically. Is it possible?
(Also, I don't want to use javascript and put my htmls into a string mainly because I want these various htmls to be easily editable.)
Any suggestions?
NOTE: I can't use this as a webserver b/c I'm using this in a Phonegap App which isn't a webserver it's simply static content. I guess I could tweak the phonegap settings to allow .load() to take place, but I want to see if this is possible using plain html and standard security first
NOTE#2: I just realized I can do this successfully (use load()) with phonegap. But I'm leaving this question open if there's a way to do it using file:// on desktop with no security warnings.
Maybe you can use html imports .
Here is a good explanation about they: http://www.html5rocks.com/en/tutorials/webcomponents/imports/.

Angular facnybox not a function

I am trying to implement fancy box functionality. I've created a plunker and it works on plunker
Plunker but in my host I got
Error: $.fancybox is not a function .link/<#file:///C:/Users/h166622/Desktop/Angular/js/core/directives.js:99:6
How it could be?
It seems you are linking your stylesheets and some javascript with only "//domain.com/xxxxx". Doing it this way is great for production sites, or even sites configured locally with the use of virtual hosts. If you were to copy/paste the code and just open the .html file in your browser, it loads that file locally, thus links that do not specify a header (i.e. http or https) will try to find those links locally as well.
http: //cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.css
http: //cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.pack.js
The use of // insted of http:// is what is known as protocol-relative URLs. This way, if a browser is viewing a page through an *HTTPS** protocol, the asset will also be loaded using an HTTPS protocol. Same applies to general HTTP protocols.
So unless you configure a virtual host to do local site development, I would change those links. Another thing to note, is that your application is linked to app.js linking to a local file when viewing a .html file is usually fine so long as both exist within the same directory. Otherwise, you'll need to include and edit your application javascript through the use of inline <script type="text/javascript"> ... </script> tag.

How to load javascript not present in localhost domain in chrome?

I am running a tomcat server and my localhost base domain is :
C:/apache/webapps/ROOT/
My webpage is also present here.
However the javascripts are present in an external location.
D:/something/something
And i am importing them the following way
<script src="D:/something/something/js1.js"></script>
In IE the page loads fine and able to locate the scripts, however with chrome it fails.
On debugging I see that chrome tries to append the following:
http://localhost:8080/D:/something/something
How do i get it to work on chrome without copying the scripts to base location?
For doing anything useful from within the JS code, you'll most likely have to obey the same origin policy. This means you'll have to configure your Tomcat so that it serves the scripts, too.
If you really insist on reading the scripts from local files, that's what file:// URLs do.
You can't do this because you will search for D:/something/something/js1.js in the user/client computer.
You can do it calling (read and print) the file via PHP (D:/something/something/js1.js.php) or any other server side programming language or installing a webserver in your external location to call the file via URL like myCDN.mydomain.com.
EDIT: If you will only work in localhost, use #Pointy and #Konstantin K solutions :)

Opera: .js file won't load

I have a page that calls a script in the header, like so:
<script type="text/javascript" src="http://www.discoverfire.net/analytics/l/a.js"></script>
(Note you will NOT be able to load this script as it is DNSd locally as a staging domain)
Very Simple.
Firefox, IE, Chrome all have no problem with this basic, square-one feature.
Opera, however, refuses to load the script. Any variables or functions in it are "undefined" and in dragonfly, the script tag is shown in the DOM, but the "Script" tab says "No script files found."
I go to google and find random pages, their external .js files seem to work just fine.
Any idea why Opera hates me? Is there a security/javascript thing I am missing?
A few things that may be relevant, but really should make no difference:
The script is on a different domain than the page.
The script is only available on my local network. The domain is DNS'd locally for staging, from outside the network it points somewhere else. Does Opera have a setting to secretly use an external DNS server?
The script works on every other browser I have.
The problem isn't in the script content. I've reduced it to a single line with an alert and it simply won't work in Opera.
Update:
OK, the problem seems to be how Opera treats the domain.
I have moved the script to several other domains, and it DOES work just fine. I've moved it to several paths on the locally DNS'd domain, and it won't work from anywhere on that domain.
This leads me to believe that the problem is that Opera can't, or won't, load the script from this domain for some reason.
Strangely, there seems to be no problem loading pages and other resources from the domain, the problem lies in .js files only.
The domain is registered, but parked. We DNS'd it locally so we can use it for staging/testing, and that may be messing with Opera somehow with JS security.
I could be wrong though - I really have no idea. If anyone else has one, I'd love to hear it.
Update 2:
Regarding Dragonfly and the error console/developer tools, they don't say anything about the script at all. There are plenty of Undefined Variable errors for variables and functions that should be present from the script, but other than that, no errors. Oddly, the script tag does show up in the DOMM, but if I click on the Scripts tab, it says "No Scripts Found".
Update 3:
There is no blocked content, so we can at least rule out that setting.
You may want to see if its ad blocker is getting in the way. Your URL contains the text "analytics," which may be part of a "block this" pattern. I know some block Google analytics through Opera. An easy test for this may be to try moving your .js to a different path on the host.
Have you checked Opera's error console? Tools > Advanced > Error Console
It should provide information on why it won't load or if there another error of some kind.
Like Jacob suggested, you should check if it isn't blocked. To do this:
Right-click on your page
Select "Block Content..." in the context menu
At the top of the screen, click the "Details..." button
You should see the URL's that are blocked on the current page
You should ask in the Opera Forums. I had some problems with Opera in the past and they answered quickly.
Is the host serving the correct mime type of the JavaScript file. It's not a commonly known fact but the type=text/javascript attribute is actually ignored by browsers as it trusts that the server is specifying the correct type.
Additionally the mime type of text/javascript is actually wrong when it comes to JavaScript, the actual JavaScript mime type is application/ecmascript (if I recall correctly, it may be application/javascript though). If you don't believe me you should have a look here where I had more information and linked off to the Douglas Crockfords videos where he discussed the mime type.
I had something similar recently - opera would just not run a script on an external server... nor if I downloaded it and had it on localhost. It only ran when copy/pasted between script tags into the html page.
It turned out that the script was encoded with UTF-16 and that was somehow confusing the browser. When I converted it to UTF-8, everything ran fine.
So, just in case and if you still have that problem, check out the encoding settings...
I had the exact same issue, tying to load a script from a localhost/development server into a page, hosted on the public server at no avail. The only way I managed the script to load in Opera was to save a copy of the page into a location on the same development server and use the tag to refer to the original domain to get the page's .css and .js linked files. That worked. Looks like Opera doesn't like to mix public and localhost domains, but handles localhost without complaints.
what you're seeing is probably Opera's security precaution against the so-called "phish pharm" attacks: cross-network protection. You can not mix content from a public server and content from a local server.
Have a look at my answer here for a workaround:
Opera won't load some JavaScript files

Categories

Resources