I have master page and child page in my aplication. At runtime i determine the js & css to be included in master page pre-init method and render the js & css using squish it (bundlecss.AsCached & bundlecss.Render) method. In master page Head control the file is included using Bundle.Css().RenderNamed method.
Now my requirement is to include the external js file at the end of body element to enable faster rendering of web page. When i called Bundle.Css().RenderNamed at the end of the body element, the js file is not included in the page.
Is it not possible to specify the location where the minified js should be included in page html when using squish framework ?
Thanks in advance.
Brahmaiah
You probably don't want to do things this way. The cached/named bundles are for scenarios where you can't (or don't want to) create physical files. The way you're doing it here just creates more complexity. Bundle.JavaScript().Add("~/file.js").Render("~/blah") will still cache the bundle, but it uses the file on disk (only created once).
Are you really calling Bundle.Css().RenderNamed("javascript bundle name")? If so you need to change the call to Bundle.JavaScript().RenderNamed. If this is just a typo it would help to see more code / markup.
Related
I'm having a problem with scripts in Angular 4. Let me explain: I'm building an Angular app that will be included in a greater web application. So my app is only one among other apps inside this greater web application. In my app I need to include some HTML code representing common areas of this web application. They would be the head, header, menu and footer of the app. My app would be placed in the remaining space. Thus, I retrieve these HTML codes, turn them into SafeValue by bypassing sanitizing and include them by using the innerHTML property of some divs. After that I can see these HTMLs rendered with styling and all.
So this is the context. The problem is that the scripts in these HTMLs don't run. Even though they are not removed (you can examine the page's HTML and see the scripts there), they do not run. I need them to run as they are needed to perform some important tasks such as to fill the menu with links, animate menu expansion and god knows what else.
I have already tried to include these HTMLs in the index.html using the document DOM object to replace a div I've put in index.html as a placeholder, but I've had the same problem: it renders, but the scripts don't run. Something interesting is that if I put the script tag that is not running in the index.html directly (hardcoded, not dynamically) it works.
So, the scripts would have the following form:
<script type="text/javascript" src="//some_external_source"></script>
Only a remark: I have no control over these common HTMLs that I receive. I just receive them and have to use them for the sake of visual identity of the web application.
Sorry if it has already been answered. I have been looking for an answer for days now and I still didn't found one (I did found something similar for AngularJS though), so I posted.
This is not the way angular 2 intended such problems to be solved, if you want to divide your app into separate parts like: content, header, footer you should probably take a look at named router-outlets, or transcludion.
But if you want to do this your way, then do this:
#Component({.your metadata..})
export class SomeComponent{
constructor (private domSanitizer:DomSanitizer){
this.domSanitizer.bypassSecurityTrustScript(yourScript);
}
}
I have developed a mobile application which loads 3 css and 7 javascript files. Problem is if the wifi signal is very slow, HTML loads before all javascript and stylesheets are loaded. Since stylesheet is not loaded, HTML looks disturbed and after few seconds (i guess after css and js are loaded properly), HTML structure automatically take correct format but I dont want to show the disturbed format and to do that I need to make sure that all js files are loaded first then only HTML should display.
If you have any idea how can this be achieved ?
You can do using Cache manifests. Read these resources:
http://appcachefacts.info/
http://en.wikipedia.org/wiki/Cache_manifest_in_HTML5
https://developer.mozilla.org/en/docs/HTML/Using_the_application_cache
Alternatively - ensure your resources are loaded before the body by placing them in the right place (head tag).
You should link to your external css stylesheet at the top of your webpage in the header like this:
<link rel="stylesheet" type="text/css" href="http://whiterootmedia.com/css/example.css" />
or insert your <style> element in the header. Likewise this should be done for your JavaScript if it effects your initial layout. Keep in mind that if you are using an external JS file, the browser will stop rendering your page at the point in your code where your external JavaScript file is referenced, to load that external JavaScript file. If you're using a lot of JavaScript, place it at the bottom of your page (contrary to what most people do) or use an onload() function.
The webpage is loaded top-to-bottom, so the problems you're having should be related to the order of your css (most likely).
So... Just so you have less reasons to call me an idiot, here's why I need this:
I'm currently working on an offline project that uses jruby. So, to generate reports on the fly, it was decided (by my superiors) to use JavaFX's WebView component - so, HTML, CSS and JS.
But here's the catch: no using file system. All the content is drawn from DB and generated on the fly. No internet either. So all the content to be loaded into the WebView is to be in a single file, however enormous.
I have an HTML page and two huge files - one js, one css. When I use <link> tag for css and <script src="..."> for js - all works. Both in a browser and if I artificially load the page into a WebView. But if should I copy-paste the files into corresponding <style> and <script> tags (as it, probably, will be handled in the program), half the things do not work. Is there a special way for doing it right?
Here are the html, css and JS I'm working with (html is filled with sample data so it can be seen if everything works):
html filecss filejavascript file
You could try and merge them. Read more about this here.
This type question has been asked a number of times, but I can't find a solution that fits exactly what I am looking for..
I have a large App based in Ajax. Ajax responses includes HTML and JavaScript files used to build pages, widgets and so on.
I would like to load the CSS for these widgets on the fly via the ajax JavaScript calls. There can be any number of CSS files loaded dynamically as and when required. The most commonly accepted way (from what I can see) is to place an id on the link tag and target that, but as i am including an undetermined number of external style sheets, this will not work..
Any suggestions on how to solve this problem would be appreciated..
I am using Dojo to power the app, if that it of any help..
Thanks
We load as well many widgets on the fly in our app.
Each widget is an HTML + JS + CSS that is loaded with an IFRAME.
Once the IFRAME is loaded, you can loop on the LINK in the HEAD and import them in the main page.The same apply for the HTML, in our case it is a set of pure.js templates.
The JS extend automatically at load time a global object in the main page.
Be careful about dynamically loading CSS. CSS is loaded asynchronously so you can get race conditions with widgets that do layout in Javascript such as BorderContainer.
You can put all your necessary CSS in a file with import statements. For example, from claro.css
#import url("../dijit.css");
#import url("../../icons/commonIcons.css");
#import url("Common.css");
...
and then use the build tool to compact everything for production.
So I'm looking to take HTML code for a slideshow and insert it into an HTML box for an app.
However, obviously the .js and .css dependencies need to go with it, or else it won't function properly.
Is there a way/program that allows me in VS to take those classes and insert them within the HTML file so that they are all read at once, and the slideshow works? Ideas?
Thanks,
D.
Use external files to allow the browser to cache them. Put the reference to the external files in your master page.