I'm working on a site. It contains a lot of comments. When a user click the view page source in any browser, I want to hide or remove the comments from the HTML.
Is this possible? If possible, could someone say a way to achieve it.
Easiest way to hide code from browser and page source, use php comments:
For quick one liner notes:
<?php //Hide this ?>
For blocks of code:
<?php /*
(html code to comment out here)
*/ ?>
Another advantage to using ?php as comments, is they're ...secret... you won't expose comments you want only for your team. Seeeee-cret
At the moment I decided to use php to create html and jquery comments to hide them in view source
like
<input type="submit" value="Submit">
<?php //this is comment regarding input ?>
Possibly it affects performance... but found no other way
Regarding jquery one note.
//$('#upper_level_id0').css('color', 'red');<?php //works ?>
$('#upper_level_id'+index).remove();
In this example $('#upper_level_id'+index).remove(); does not work.
$('#upper_level_id0').css('color', 'red');<?php //works ?>
//$('#upper_level_id0').css('color', 'red');
<?php //works ?>
$('#upper_level_id'+index).remove();
But in this example all works. So conclusion that <?php comment better tos start in new line
Well you cant do that. But before you upload the html files to your server you can minify the source and upload them. But before uploading check if everything is working as expected or not. Try this website.
http://www.willpeavy.com/minifier/
The source view shows the source. You have no control over how the browser will render it.
If you don't want comments to show up when the user of the browser views the source, then don't put them in the source that your server delivers to the browser.
If you have your own webserver, you can use Google's plugin called PageSpeed that is available both for Apache and Nginx, one of it's many features is to remove your comments from the code both html and css.
I think the only workaround would be to open a new browser window and copy the html contents there using javascript - it will be the rendered code already so there you won't have any comments.
But it's rather unlikely that you need this. The simple way is not to output your comments on server side. Now there are a lot of options (output buffering plus minification seems to be the most reasonable).
Jsource view shows the source. You have no control over how the browser will render it.
If you don't want comments to show up when the user of the browser views the source, then don't put them in the source
Related
I am pulling the content of a bunch of customer reviews from a website using a tiny piece of PHP, though the title of each review contains the URL to the original review on the website that it comes from, which is great, except that the URL that is pulled does not contain to originating websites full address.
So on my website, the link does not work. You can see it in action here:
http://www.clearpandb.co.uk/new2016/feedback.php try clicking one of the review titles.
Is there any way to fix this with CSS? I think all it needs is a prefix to the original site. What is pulled from the originating site is just e.g. "/job/view/1971050", which when clicked tries to find this on my site (obviously won't find it). So I need to prefix it with "www.mybuilder.com" so that it works.
If the above isn't possible, a last resort might be to just disable the URL (without removing the title text itself) just so that there isn't a bunch of broken links.
PHP being used:
<?php
include_once('simple_html_dom.php');
$target_url = "https://www.mybuilder.com/profile/view/clear_plumbing_and_building_ltd/feedback";
$html = new simple_html_dom();
$html->load_file($target_url);
foreach($html->find('li[class=job-view-feedback]') as $jobviewfeedback){
echo $jobviewfeedback;
}
?>
I'm using a modified version of this tutorial for this:
http://www.makeuseof.com/tag/build-webcrawler-part-2
Which makes use of the a "helper" called "Simple HTML DOM".
Any help or pointers in the right direction are much appreciated, thanks in advance!
Can you edit that PHP? If so, do a PHP string replace on $jobviewfeedback... search for href="/ and replace with href="http://www.mybuilder.com/
so instead of
echo $jobviewfeedback;
you'd have
echo str_replace('href="/', 'href="http://www.mybuilder.com/', $jobviewfeedback);
First time making a webpage in html. I have an assignment to format a bunch of text using appropriate html tags. No problem. But I would like to clean up my code by storing the paragraphs in a separate file. I have been searching for hours and cannot find anything.
Bottom line what I want to do:
have a file: strings.{html/xml/php/js}
and access variables from that file in my page index.html doing something like this:
<p>$someVarName</p>
This seems like a bit of a strange 'optimization', one that is not usually made, at least as far as I understand the question.
What you can do is have a JavaScript file e.g. script.js, and reference it in your index.html file:
<script language="javascript" type="text/javascript" src="script.js"></script>
In script.js you can insert custom HTML as such:
document.getElementById('tag-id').innerHTML = '<p>some text</p>';
To reduce the page load time of a website in the browser usually one tries to deliver one HTML file per page and one compact CSS/JS/image/SVG file for the whole website. All files are usually aggregated server side from multiple resources as you like to do.
Here are some common ways to enrich HTML pages and their creation process:
Using an iframe you can let the browser import and display another page using a single HTML tag but this is not recommended because it complicates layouting and a content's URL is not visible to the user in the browser's address bar.
Using PHP you could have an index.php with the contents of your index.html plus some PHP snippets printing variables from an included variables.php. PHP requires server side execution which is typically implemented using Apache2 webserver. A PHP script, index.php, would be executed each request / each time a user accesses the page.
index.php
<html>
<?php require_once 'variables.php'; ?>
...
<?php print $property1; ?>
<?php print $property2; ?>
</html>
variables.php
<?php
$property1 = 'value 1';
$property2 = 'value 2';
?>
Using XSLT you can transform the HTML as XML. This requires the HTML formatted as well-formed XML. XSLT can be executed both client and server side. XSLT 1 is limited but supported by major modern browsers. XSLT 2 is not supported by most browsers but often executed on the server side or rather offline to generate aggregated static html pages from XML/HTML with e.g. Saxon CE. On the downside XSLT may be more difficult to start with than PHP.
Using JavaScript (JS) you can also let the browser load additional documents into a currently displayed document. This is also known as AJAX and can be done with e.g. jQuery or AngularJS. With JS you can create interactive web pages and most modern websites make use of it.
BUT: Loading contents with JS on the client side limits the ability of search engines to index your content (bots usually do not execute JS). You should only use this method if your contents should not be crawled by bots or if you provide an alternative.
Of course, there is also a plethora of other template/programming languages that offer server side solutions for your problem like Java, Python and Ruby and their specialized frameworks.
Additionally you should check out one of the many existing PHP CMS (server side HTML page generator with UI to edit content).
I have several HTML pages and some of the content is same for all the pages. Is there a way to put the content into a single file and include it in all the HTML Pages?
Lets say that the common data is in HTML format.
Yes you can use iframes for this purpose.
Design your master page in .html format and use it with iframe tag
<iframe src="MasterPage.html"></iframe>
Refer following link:
http://reference.sitepoint.com/html/iframe
I think what you are looking for is a templating solution.
You can do it in jsp as follows
by using two ways
<jsp:include page="reuse.html" />
or
<#include file="reuse.html">
Have a look at this question What is the difference between <jsp:include page = ... > and <%# include file = ... >?
You can do this in three places:
At build/publication time — you generate HTML documents from your data sources and then publish static files. This option works for everybody, but can make the build times rather long for very large sites. I use ttree for this.
At run time, on the server — this works in much the same way as the previous option, but is done on the server and on demand (i.e. when a page is requested). Template-toolkit is also an option here, but here are many many others, including Django templates and Smarty.
At run time, on the client — this involves pulling the content together using frames or JavaScript. It is unfriendly to search engines and will break bookmarking unless you are very careful. I don't recomment it.
One thing you can try is using PHP.
for example if all pages have a common header, create a new document with the name of header.php and place the contents of the header div inside. Every other page you want the header to appear just call it by using :
<?php include_once("header.php");?>
Hope this helps
The best way to do this is at run time.
This means using PHP, ASP, JSP or another server-side scripting solution to join your pages together on demand when sending them to the client.
In PHP, this can be achieved with the following:
<?php
include_once("head.php");
?>
<!-- some body content -->
<?php
include_once("foot.php");
?>
Managing your header, footer and content all separately makes it very easy to update your design without having to edit many files.
It is not recommended to do this client-side with frames/iframes, as this is very unfriendly to search engines and can slow down your server as several HTTP requests must be initiated.
I am developing a project and find that there are elements that are common to all pages, I wonder if there is any way to define these elements generally and call them from your html to avoid having to define each of the pages. thank you very much for your help
test.html
<div>Menu</div>
When you need to have this menu, just call this code in your page:
$('#result').load('ajax/test.html', function() {
alert('Load was performed.');
});
load()
Another option could be AngularJS, or just something like includes with PHP.
I don't know any way to do exactly this with pure HTML, but by mixing in a little server side script, you can. Just to give you an idea what it would look like:
This example uses PHP. If you are on a Microsoft server, you would need to translate this example into .NET or .aspx.
First, save the following to a file called "mytest.php" in the same folder as your other pages. (You can put it in a subfolder if you wish, but for this example I will keep it simple).
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Just one line for this test. A little useless, but you can see the point.
Now, in the <head> tag of your HTML, you can do this (I added the <head> tags just so you can see it... You would not want to have TWO sets of <head> tags.)
<head>
<?php include 'mytest.php'; ?>
</head>
Now, visit the page and display the HTML and you should see that line incorporated into your HTML. Note that any document that contains PHP code (as above) must end with a .php extension.
As #loops suggested, I would highly recommend AngularJS for the rescue.
It's a great MVC framework built with JavaScript and no external dependencies.
It offers the possibility to create custom elements using their Directives
So you could create a new element <mymenu></mymenu> and you can give this new tag some behaviour as well as bind events to it.
AngularJS takes care of all the rest and your new tag will be available across all the pages of your application.
And yes, you are correct thinking that should be done on the client side rather than server side.
I am happy to provide a full working example for you once you get your head around the framework first. Otherwise I think it will be too much information at once ;)
I am making a Facebook-app were you can browse you and your friend's likes on a webpage that displays lots of funny pictures. The problem is that when I link to these pictures, they appear as something completly else. Like a placeholder or something. It displays correctly if it's cached (I think).
Take a look at this jsfiddle: http://jsfiddle.net/jVBSk/ . If you rightclick at the image, you get an other filename than the one in the source.
How can I avoid this, making the page display the correct images?
It seems to have some kind of hot-linking protection on it. This one's not very well made, so it's quite easy to bypass.
<?php
$file = file_get_contents($_GET['image']);
header("Content-Type: image/jpeg");
$image = imagecreatefromstring($file);
imagejpeg($image);
imagedestroy($image);
?>
Then call the script like this: script.php?image=http%3A%2F%2Fgif.artige.no%2Fstore%2F10%2F10002.jpg
The image URL has to be encoded. This can be done using urlencode() in PHP, or here's an online tool to do it: http://meyerweb.com/eric/tools/dencoder/
So in HTML that'd be something like this: <img src="script.php?image=http%3A%2F%2Fgif.artige.no%2Fstore%2F10%2F10002.jpg" alt="[Image]" />
The website is checking the referrer to see if it's their domain, or not. If it's not, it's returning this "do not steal this" image. (If anyone can translate that, I'm sure that's what it's saying).
See http://en.wikipedia.org/wiki/HTTP_referrer and http://en.wikipedia.org/wiki/Referrer_spoofing.
What you do is called hot-linking and is frowned-upon by many website owners..
The problem is that you are stealing their bandwidth, and as a solution they provide a different image instead of the requested one when the requesting page is not from their own domain..