I have searched many on this forum to hide some information in view source like script include and css, I didn't find any working solution
this is what I am doing in my php script
<html>
<head><?php include('mylibrary/my_include.php');?></head>
<body>
<div></div>
</body>
</html>
in view source I am getting like this
<html>
<head>
<!-- My function -->
<script type='text/javascript' src='Library/My_fun.js'></script>
<!-- Index -->
<link type="text/css" rel="stylesheet" href="Index/Index.css" />
<link type="text/css" rel="stylesheet" href="JS/jquery-ui.css" />
</head>
<body>
<div></div>
</body>
</html>
I would like to hide js and css in view source which are in 'mylibrary/my_include.php', Is it possible to do so ? or any alternate solution displaying only following in viewsource or any other
<head><?php include('mylibrary/my_include.php');?></head>
No.
You can't give something to the browser without giving it to the user. The user controls the browser, you do not.
I would like to hide js and css in view source which are in
'mylibrary/my_include.php', Is it possible to do so ? or any alternate
solution displaying only following in viewsource or any other
No, it is impossible to render your page without these references due to the fact using these references, the web browser knows from where to download, parse and load your resources (css, js).
But:
You can obscure/compress/minify your JS & CSS files in such a way that it would be very hard for the users to identify it correctly.
UPDATE:
Per the OP request, here is how to compress resource files:
http://refresh-sf.com/yui/
This is not possible. The browser needs to see it. Thus, the user is able to see it too.
There are methods you could use like obfuscating, disabling right clicks, etc., but these only work to prevent a small number of users from viewing it.
You can not hide the source html / javascript as they are run on client. You can obfuscate at max still one would be able to get to the source.
Yo'll have to switch to some kind of compiled application, like one in C++ instead of web application if you want to avoid people reading your sources.
Related
In this question I asked, how I can generate shades of one color responsive to the number of div's. #DonJuwe came up with a perfectly working solution and demo: http://jsbin.com/xakifequ/1/edit
However when I'm trying to use the code from the jsfiddle or JSBin it just doesn't work.
So I downloaded the source code from JSBin, opened the .html-file and what I got was this:
Can someone please explain me, why this happens?
As per snapshot, You are using
<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
Replace it with
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
You are using protocol less Urls, i.e. //code.jquery.com/jquery-1.9.1.js, When you open a your html file like file:// then jQuery is not loaded thus desired result is not achieved.
However, if you test your html file like http://localhost/yourfile.html you will get the desired result.
Note: Use // instead of http:// when you want to inherit the protocol from the page
you missed http: in the jQuery source link. if you using online resource you should follow the url's protocol. Other wise browser will search it from local. in this way you just confused your browser... So only it happens... :D
you should use...
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
instead of
<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/
In the "See in Action" section you can see the whole code is separated into 3 parts (HTML,CSS and JS). I'm new in working with asp.net. I know I can put css and js codes inside different files and have a web form which contains html and asp.net tags, But really I do not know how I can assemble the codes are shown in above page to get the correct output.
Any help please?
Simple straightforward example for a way they can all come together:
<html>
<head>
<style>
/* PUT YOUR CSS HERE */
</style>
</head>
<body>
<!-- PUT YOUR HTML HERE -->
<script>
// PUT YOUR JS HERE
</script>
</body>
</html>
This way they all come together at one page, and can affect each other (Css can affect HTML, and JS can affect html & style (which means, it can also change the Css).
Note - the only one you really need in an HTML page is the HTML itself. you could add links to other resources you have written in other files instead of copypasting scripts if you already have the files pre-made, which is probably the better, more orginised approach to this - however the one I've written is more easy to understand if you're a novice, and is probably the best if it's your first time trying all these together. Good luck, new web dev, may the force be with you. (:
Here is the file structure I usually use:
/
|_index.html
|
|_assets/
|_css/
| |_style.css
|
|_ js/
|_script.js
And my index.html generally looks like this:
<!doctype html>
<html>
<head>
<title>Test page</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<h1>Hello world!</h1>
<script src="assets/js/script.js"></script>
</body>
</html>
Why is the CSS linked in the head tag?
Because I want the CSS to be loaded as soon as it can, so the user doesn't see an unstyled version of my page when it loads.
Why is the script called at the bottom of the page?
Because that way, I'm sure the whole document is loaded and parsed when I execute my script.
I'm using the method below to load a remote page into a div I have on the page.
$('#result').load('www.myurl.com/results.html');
I'm curious, is it a bad practice to load an entirely formatted HTML page within another page? My concern is more towards loading css or additional javascript includes that might overwrite other elements on the primary page.
I haven't experienced any issues during my initial tests, I'm just not sure if this is the best practice.
To Clarify: If I have a primary page like so
<html>
<head>
<script src="jquery.js"></script>
<link href="mycss.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="remoteContainer"></div>
<script>
$('#remoteContainer').load('www.myurl.com/results.html');
</script>
</body>
And results.html code that looks like this:
<html>
<head>
<script src="jquery.js"></script>
<link href="myResults.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<h1>My Results Page</h1>
</header>
...
</body>
Will the CSS and JS overwrite each other,or will the pages function as 2-separate entities?
This will work fine and the browser will handle it properly. From the jQuery docs:
... browsers often filter elements from the document
such as <html>, <title>, or <head> elements. As a result, the elements
retrieved by .load() may not be exactly the same as if the document
were retrieved directly by the browser.
However, it's probably better practice to specify the element in the returned HTML that you want to insert:
$('#remoteContainer').load('www.myurl.com/results.html #containerDiv');
Ok, so maybe I should have just taken a look at DevTools before I asked the question.
After reviewing the Element Inspector, I now see that (at least in Chrome) that the browser strips out the HTML, HEAD, and Body tags. It also removes the additional jquery include. However it does leave the
<script>my js functions here</script>
Although I understand that I can't trust that all browsers will be as efficient, at least now I have seen the light.
I agree that it 'should' work 'fine'. But consider the extra overhead you are creating that could be eliminated by returning only the content that you need from the server. You might be hitting the database to retrieve data that is rendered in the parts of the page that you are discarding. For example, you might have information about the user displayed at the top of every page. Or you might be looking up other information that goes into your page meta tags in the head. You probably have some type of server side templating going on to create these excess parts of the page. Then you are putting this excess content in a response, sending it over a wire, then asking the browser to parse it, create html elements out of it, then remove the parts that are not wanted for you.
This may not be a big deal. It depends on how much traffic you get, how much extra work the server is doing to render the full page, how much of a load the server is under, and how much time/money/man power you have versus how much it would take to be able to send a trimmed down response instead. If it's a small project, with light traffic, it might not be worth changing. But it's also probably an easy change to make. And since the question is about a best practice, I would say no, loading a full page to render just a portion of the page not a best practice. The best practice is to return just what you need from the server, and to use all of it to update the page. This could be pre-rendered HTML or it could be JSON, but that is another discussion altogether.
A trivial solution in PHP could be as simple as the following, using ?format=ajax in your query string:
<?php
$ajax = $_GET['format'] == 'ajax';
if (!$ajax) {
render_head_and_stuff();
}
render_results();
if (!$ajax) {
render_footer_and_stuff();
}
I have a website that runs smoothly, but I just saw that when I'm viewing the source, in Chrome and IE9, it shows my css and javascript inline instead of the link to the files. <style type="text/css" style="display:none">[my css]</style> instead of the <link rel="stylesheet" type="text/css" href="style.css" /> that I see in my PHP editor and that I coded on purpose. I don't see things like this on other websites, only at mine.
How is this possible? A certain change in server settings?
The browser tools are just in-lining it to make your debugging easier. This is merely a convenience to show you the flow of the page. The files are still external and shared across many pages.
There are 3 different ways of adding CSS to your HTML pages: inline, external, and attribute-based.
Inline CSS is what you have now. It's when the CSS code is directly embedded into your HTML.
External CSS is when you reference a CSS file, like your second example.
Attribute based CSS is when you directly set attributes in the HTML file. Ex:
<div style="CSS HERE"></div>
All 3 methods work the same, but for abstraction purposes, external stylesheets are recommended.
In your case, the PHP editor is probably injecting the CSS directly into your code.
For example I have a code that drags in my twitter feed via a javascript file, I have pasted the links directly in the div I wish for it to appear however my page won't validate (obviously) but I can't figure out how to send it to appear in that div with the Javascript code hidden in the header.
Below shows the div I need the information in and the javascript files that call the information
Any help would be greatly appreciated !
<div id="twitter_update_list"><script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/hookline_sinker.json?callback=twitterCallback2&count=1"></script>
<br />FIND US AT <br /><strong>#HOOKLINE_SINKER</strong></div>
The only reason that I can see for that not to validate is that the ampersands in the URI haven't been HTML encoded (i.e. as &).
<script> elements are allowed as child elements of <div> elements.
If you're using the JavaScript provided by Twitter then I don't think you can.
What you're after (if I understand correctly) is an external JavaScript file that you link to in the <head> of your page, that traverses the DOM on page-load, finds a div with an ID of "twitter_update_list" and inserts the content from Twitter.
While this functionality is quite easy to code, it would have to be within the JavaScript file itself. Since you're using Twitter's JavaScript then it's up to Twitter to provide this functionality within their JavaScript.
I think you'd have to look into writing your own JavaScript file that fetched your Twitter RSS feed and parsed it on your page.
You might want to look at Remy Sharp's solution - at a brief glance it looks to do what you want: http://remysharp.com/2007/05/18/add-twitter-to-your-blog-step-by-step/
<html>
<head>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js">
</script>
</head>
<body>
<br />FIND US AT <br /><strong>#HOOKLINE_SINKER</strong>
<div id="twitter_update_list">Updates will go here!</div>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/hookline_sinker.json?callback=twitterCallback2&count=1"></script>
</body>
</html>