Is there any way if i can load javascript and css files in spring mvc, such that it is not readable whenever someone view source of the web page ?
I want to do this without doing minification.
I also looked for other options like & dont know which one to user.
NO. Well, not really.
You can't add js and css to the DOM and have it work without being in the DOM. You could dynamically load them, but they will still be visible in the DOM inspector in any browser, but will not be visible to your run of the mill user right clicking and doing view source.
Related
When you navigate to: blockchain.info
You will notice that if you click view-source on the page, it will show HTML context different than that when you inspect-element. My question is, how are they doing this?
I understand they are using .pug templates from AngularJS framework. But how does my browser know where to read them from if they are not loaded from the client-(browser)-side?
Also, if I was to insert jQuery onto the page, would the jQuery know when the events are triggered on('click', 'submit', 'whatever') etc ...?
When you click View Source, you see what the server sends back. Many pages do not send back a full HTML page, instead some skeleton HTML and add the rest of the functionality via JavaScript
When you Inspect Element, you're viewing the browser's representation of the DOM, which includes any manipulations done via JavaScript. For a visual explanation, see this article on css-tricks: https://css-tricks.com/dom/
Any framework that is rendering HTML client-side (React, Angular, Vue) will do that. The actual source code could literally just be some basic html boilerplate and a div that then gets loaded with an application through something like Javascript. Thus, when you view the source of the page, you're seeing this basic templating. But when inspecting an element, Chrome Dev tools (and others) are inspecting the element that is being rendered client side. Your browser has placed those elements on the DOM, they didn't exist in the source code till the code executed. Hope that helps clear things up.
I am using one HTML file as the template for many pages and want to show different coloured buttons and links on some pages. I am trying to use CSS VARIABLES so that I can update them with javascript. But it all happens once the JS is loaded which causes a glitch.
Can anyone suggest a better solution or any alternative approach?
Project uses Jquery, Bootstrap and a Laravel backend.
I have the following problem.
I have a typo3 page without any template I made by myself, but it gets in some way the style and the behavior of the other pages (I mean navigation, footer and so on). Now I have written some HTML inside the page by creating an HTML element.
In this HTML element, I included some js-code, which uses jQuery. The problem is, that the page loads the jquery at the footer and my scripts are loading before (in the HTML element). So my script does not recognize jQuery. How can I add my scripts at the whole end of the page? I know, that it has something to do with templates, but when I create a new template for the page, the whole content disappears.
Would be nice to get any help.
Cheers,
Andrej
It is usually good practice to read all your JS from a single file placed in the footer of the page. Add this to the setup section of your page template:
page.includeJSFooter.scripts = fileadmin/js/scripts.js
Then remove the JS from the HTML template and put into this file. This file could hold all your custom JS and possibly even all the libraries you use on the page (if you are not loading them from a CDN).
Bonus: the JS doesn't have to be re-loaded on every page view but can be read from cache.
For reference: https://docs.typo3.org/typo3cms/TyposcriptReference/Setup/Page/Index.html#includejsfooter-array
I hope by template you mean a template record where you store your TypoScript? Otherwise this answer is not what you are looking for. :)
You can just add an extension template on your page that only adds to the rest of the TypoScript but does not override anything. To do so, go to the template module, choose "info/modify" in the dropdown at the top and use this button
Explanation: an extension template has the checkboxes for clearing the constants and the setup not checked and will not mess with the rest of your site's TypoScript:
I have downloaded a aspx webpage and saved it as html. I open it in IE and chrome and it takes time to load + some parts are missing. All the text is there but the onmouseover is not working properly and some css is not displaying correctly. Was the content not downloaded completely? i.e is it missing sme javascript, css or else?
I have done what you describe on many occasions for the purposes of putting together a prototype of new functionality in an existing application.
You will likely need to do a couple of things:
Ensure the paths to your JS and CSS resources are right (removing the unneccessary JS files, if any)
Also, you will likely need to update the paths in your CSS to any image resources in your page
I have jQuery based template from themeforest and
i building on this ASP.NET Web Application.
But i have a problem, when my javascripts files
from template are included, my asp.net things
don't work how should, eg. dropdownlist events
not rising... When i comment javascript templates
file then everything works fine.
Someone can help me solve this?
Thanks,
Many jQuery UI elements (dialog, for example) are rendered at the end of the BODY tag. This means their contents are moved outside the FORM tag, and are thus ignored by ViewState. This will prevent their associated events from being triggered (and will prevent their updated data from making it back to the code-behind at all).
If you use firebug to examine the rendered HTML, you should be able to confirm whether this is the root cause of your problem.
If so, see this SO discussion for a resolution / workaround. HTH