If jquery is added in globally used header.php across the site then How to stop to load jquery library only for those pages of site which doesn't need actually? If we can't use more than one header.
purpose of question is to not to penalize those page with slow loading which actually don't need.
Your site shouldn't need more than one global-header, if you opt to even use headers to begin with. If it does, just include jQuery on all pages. It's a small cached file, it won't hurt the browsing experience.
By using the google-hosted version, it may be the case that many of your uses already have it cached before they even reach your site.
I have been guilty of pounding my fist into the nail while asking everyone else to move the hammer that's in the way...
Why not tackle the problem from the other end and use jQuery to optimize the first load?
If you have big pages that are already taking a while to download, why not section off the less-performant areas and use $().load() to fill those in?
The page will load quicker (better user experience) and you don't have to be adding any additional processing to pages that don't need it.
Cheers,
-jc
assuming you are loading the jQuery file from a correctly-configured webserver (or from google's CDN), it will be cached and not re-downloaded on each page. Assuming a visitor will hit at least one page on your site that needs jQuery then you really won't gain anything by trying to remove it from loading on pages that don't use any javascript features from the library.
First, use the compressed jquery for production. It's much smaller. Second, IIRC, once jquery is downloaded with the first page, it will be cached and won't need to be retrieved from your server for each subsequent request.
Otherwise, if you really need to explicitly load jquery only on those pages that need it, you would have to have some way for the body of your page to tell header.php that it doesn't need to load jquery. If header.php is loaded before "body.php" then that's pretty hard to do without some fancy output buffering or such.
If you're using a templating system like Smarty you could have a conditional in the master page template to check a $loadjquery flag that you set in body.php before sending the whole page off to be rendered. But that's complicated too.
Your question is very general, some specific would be great, maybe even a link to the site. Personally if you are using a CMS I would try to make some sort of "flag" for that page, or if you are simply loading a page and then loading the header from that page, insert a variable before you load the header and use that as your flag for loading jQuery.
An example:
If a user wants to see www.mysite.com then the following file would be loaded: www.mysite.com/index.php with the following code:
<?php $needJQuery = true;
include('header.php');
echo 'content will go here';
include('footer.php'); ?>
header.php would include something such as this:
<?php if ($needJQuery) { ?>
<script src="/jquery/jquery-min-3.2.1.js" />
etc. for all the content that you need above/below.
<?php } ?>
For the pages that don't need jQuery loaded, you would either leave $needJQuery undefined or you would do as follows:
<?php $needJQuery = false; ?>
Hope this helps,
As stated earlier, modify the header file so it'll check for the presence of flag variable and only output the jquery headers if needed.
If you don't have the ability to modify the header file, you could load it with output buffering turned on and filter the output before it heads out to the client:
<?php
ob_start();
include('header.php');
$header = ob_get_flush();
$cleanheader = some_operation_that_removes_the_jquery_script_tags($header);
echo $cleanheader
?>
Related
I have two headers: one to display for a logged in user, and one to display when logged out/not a member. I also have a footer that should be duplicated on each page.I had the idea to use SSI to include the header and footer.
As of now, we haven't started much server-side processing, and thus don't keep track of logged in/logged out users. As such, for now, I just want to use the page that is including the header to determine which to display. I had the idea to use a PHP file as the header instead of an SHTML file, so I could do some processing to determine which header to show.
So is it possible to determine which page is calling the include with PHP?
Am I going about this all wrong? If so, what solution is more appropriate?
For example, each html page fits this general layout:
<html>
<header>
<!-- relevant header calls -->
<header>
<body>
<div id="body">
<!--#include virtual="header.php"-->
<!-- actual page content -->
</div>
<!--#include virtual="footer.shtml"-->
</body>
</html>
And in header.php I want something like:
<?php
if(/*page is a non-logged in page*/){
echo(/*logged out header*/);
} else {
echo(/*logged in header*/);
}
?>
So is it possible to determine which page is calling the include with PHP?
No idea. But if it is possible it will be via $_SERVER. Put this in your header.php for testing:
<?php
echo '<pre>';
print_r($_SERVER);
echo '</pre>';
However, if the page is being requested as *.html with Server-Side Includes I can't even begin to predict what kind of havoc this is going to play with PHP Sessions. I have doubts that session_start() will ever be able to set proper headers in this context, or if the PHP session cookie will ever be sent to the client or be passed through SSI back to PHP.
As far as I am aware/concerned SSI should only ever be used to include static content or dynamic content that does not rely on any sort of interaction with the user, including something as basic as if they're logged in or not. SSI is a kludge between static and dynamic pages and should be referred to as "kinda-sorta-dynamic-but-not-really".
Short answer: SSI is going to be a massive pain in the ass, ditch it and just use PHP include().
Edit: Your page would look something like this at the most basic level, and is not really any more complex than using SSI. If you took a more MVC-oriented approach [namely the C and V parts] it would become more manageable:
<?php
session_start();
// other initialization
?><html>
<head>
<!-- relevant header calls -->
<head>
<body>
<div id="body">
<?php
if($_SESSION['is_logged_in']){
echo(/*logged out header*/);
} else {
echo(/*logged in header*/);
}
?>
<!-- actual page content -->
</div>
<?php include("footer.php"); ?>
</body>
</html>
For the sake of ease in programming it's best to use one or the other. It's best to go with PHP exclusively because:
Massive support community at php.net
In most implementations it's faster than using the SSI because PHP is designed to do all of the processing and parsing of PHP code, whereas an SSI has to read your SHTML page (after it's written) and sift between comments and includes, then include all of the components.
If you're including PHP pages as SSIs you're making Apache wait on PHP, whereas if you were using PHP alone it would have already delivered the page.
You can do things with databases and a lot more with PHP.
PHP pages can't be accessed from the server without being processed, so there is less risk of someone exploiting your code vulnerabilities if you're using standard practices.
SSIs are plainly readable as code (and very limited).
You can include an SSI with PHP if you're running PHP as an Apache Module, using the function virtual(), but why would you want to? You can include() just about anything into PHP.
Example
I'm going to use an account management site as an example. To make the header dynamic you'll need to find the $var for the page calling it (I'm going to use $_SERVER['REQUEST_URI']). There are several reserved server variables in PHP that you can reference to make calls depending on circumstances. So let's say the authorized directory where all logged in pages go is called "auth" your common shell file might look like this:
<?php
//Check for the page the person is asking for
session_start();
$root = $_SERVER['DOCUMENT_ROOT'];
//Check for the "auth" directory
if(preg_match('!^/?auth!',$_SERVER['REQUEST_URI'])){
//Do some check to see if they've been authenticated... this one is not secure, but you get the idea
if($_SESSION['logged_in']){
//Require the correct header
require_once($root.'/includes/logged-in-header.php');
} else {
//They don't belong or they're not logged in, kick them back to the login page.
header("Location: /login.php?e=1");
die();
}
} else {
//It's not an authorization required page, so show the standard header.
require_once($root.'/includes/non-auth-header.php');
}
//let's find out the page that's loading the shell.
$pageName = preg_replace('!/([^/]+)$!',"$1",$_SERVER['SCRIPT_NAME']);
switch($pageName){
/*Auth pages*/
case "billing.php":
require_once($root.'/includes/billing.php');
break;
case "account.php":
require_once($root.'/includes/account.php');
break;
case "logout.php":
require_once($root.'/includes/logout.php');
break;
default:
//show the login page
require_once($root.'/includes/login.php');
}
require_once($root.'/../shell.php');
require_once($root.'/includes/footer.php');
?>
So if you were in the auth directory and you were not logged in, you would get the homepage. If you're in the auth directory on the billing.php page and you are logged in, the site would load the billing page.
The auth/billing.php code might look like this:
require_once("$_SERVER['DOCUMENT_ROOT'].'/../shell.php');
The include/billing.php code would contain all of workings of the page and it can be formatted in HTML, but you'd probably pull that stuff from a database.
I want to include the same navigation menu on multiple pages, however I do not have PHP support, nor can I affect my server in any other way.
I want to avoid simply copying and pasting the html onto all the pages as this would make updating the menu a pain.
The two options I can think of are as follows:
1) Have all the content exist on one page, then determine which content to show based on a keyword appended to the url:
example.com/index?home
example.com/index?news
2) Include a javascript file that has a function that writes the menu out and call the function on each page
function setupMenu() {
$("#nav").html("<ul class='nav'><li>home</li><li>news</li></ul>");
}
With Option 1, the updating process would consist of editing one nav menu on the one page
With Option 2, updating would mean changing the function in the javascript file
My concern with Option 1 is that the page would have to load a lot of content that it wouldn't need to display. My concern for Option 2 may seem trivial but it is that the code can get messy.
Are there any reasons doing it one way would be better than the other? Or is there a third superior option that I'm missing?
You have a few options, each with its own advantages and drawbacks:
Server Side Includes, or SSI. If you don't have PHP there's a good chance you don't have SSI either, and this option requires some irritating mucking-about with your .htaccess file. Check Dominic P.'s answer for a writeup of SSI. The benefit of SSI over JavaScript or Frames is that it doesn't require the user to have JS enabled - which a lot of users don't - and it also doesn't present any navigational difficulties.
Frames. You could either use standard frames to put the navigation in its own separate file, and with the correct styling it would be seamless. You could also use an iframe to place your navigation in an arbitrary part of the site, like a sidebar or whatever. The downside to frames, particularly standard frames, is that they tend to make bookmarking, links and the forward/back buttons behave oddly. On the upside, frames don't need browser compliance or server support.
JavaScript. You can refer to any of the other answers for excellent explanations of the JS solution, particularly if you're using jQuery. However, if your site isn't otherwise dynamic enough that your users will want to have JavaScript enabled, this will mean that a large number of your viewers will not see the menu at all - bad, definitely.
-
Yes use .load jQuery ajax function
$('#result').load('ajax/menu.html');
That way your code stays clean, and you can just edit the includes in seperate HTML files just like PHP.
You should consider AJAX for this task. Include a third party library like jQuery and load the separate HTML files inside placeholders, targeting them by ID.
E.g, in your main HTML page:
<div id="mymenu"></div>
Also, in your main HTML, but in the HEAD section:
$('#mymenu').load('navigation.html');
But your best bet would be to switch to a hosting that supports PHP or any other server-side includes. This will make your life a lot easier.
Check out Server Side Includes. I don't have a whole lot of experience with them, but from what I recall, they are designed to be a solution to just your problem.
Server-side includes: http://www.freewebmasterhelp.com/tutorials/ssi/
You can use HTML Imports http://w3c.github.io/webcomponents/spec/imports/
Here is an example from http://www.html5rocks.com/en/tutorials/webcomponents/imports/
warnings.html contains
<div class="warning">
<style scoped>
h3 {
color: red;
}
</style>
<h3>Warning!</h3>
<p>This page is under construction</p>
</div>
<div class="outdated">
<h3>Heads up!</h3>
<p>This content may be out of date</p>
</div>
Then index.html could contain
<head>
<link rel="import" href="warnings.html">
</head>
<body>
...
<script>
var link = document.querySelector('link[rel="import"]');
var content = link.import;
// Grab DOM from warning.html's document.
var el = content.querySelector('.warning');
document.body.appendChild(el.cloneNode(true));
</script>
</body>
I need one advice from you. I am working on a website, which uses PHP and HTML. As the biggest part of the header and footer code will be same for many pages, I am thinking of using PHP's include to avoid code duplication. But, each of those pages requires different stylesheets and JS files included. What do you think how could I let the other file know what scripts and stylesheet to import?
Our company does this:
The header reads the filename of the page calling it when it's included.
Then, it changes the extension to '.js' and outputs that if it exists. Same for CSS.
So if I have a page "register.php", it will auto-include "register.js" and "register.css" if they exist.
Here's what I do:
<?php include("includes/headContent.php"); ?>
<title>Page title goes here!</title>
<script src="script_only_used_on_this_page"></script>
<?php
require_once("includes/siteHeader.php");
?>
Site Content Goes Here!!
<?php
require_once("includes/siteFooter.php");
?>
Head Content includes any PHP I want included in every page, as well as the opening html and head tag, and any Javascript libraries and css stylesheets I want on every page. Site header closes the /head tag, and opens the body as well as printing out my site header and some other markup that goes on every page. Finally Site Footer closes out my template. Everything in between is my content area!
There are lots of different ways you can do templating, if you wanted to create a simple include and an echoHeader() and an echoFooter() function... just have the echoHeader function accept a parameter which you would pass your javascript and CSS lines to.
you can use MVC coding pattern
I have an iFrame that does some background processing. When this processing is complete I would like to re-direct the user to another page, but the header change code is only affecting the embedded iFrame. Is there a way to target the main window?
I have seen the deprecated Meta redirect have a target attribute, but I don't know how widely it is supported.
In Javascript:
top.location.href = "resultpage.htm";
Works only if the top frame is on the same domain as the emitting page.
For a solution that works across domains and without Javascript, the following would work:
Continue
Use JavaScript to track content of frame, if content change, redirect browser :)
We can use javascript like this:
target.window.location='locationpage.php';
parent.window.location='index.php';
For me this always works without fail, have tried many of the others but there always seems to be some sort of issue....and it does not matter if headers have been sent etc.....
<?php
echo "<script>window.location = 'http://www.google.com'</script>";
?>
Remember this goes at the very bottom
I have about 7 Javascript files now (thanks to various jQuery plugins) and 4-5 CSS files. I'm curious as to what's the best practice for dealing with these including where in the document they should be loaded? YSlow tells me that Javascript files should be--where possible--included at the end. The end of the body? It mentions that the delimeter seems to be whether they write content. All my Javascript files are functions and jQuery code (all done when ready()) so that should be OK.
So should I include one CSS and one Javascript file and have those include the rest? Should I concatenate all my files into one? Should I put Javascript my tags at the very end of my document?
Edit: FWIW yes this is PHP.
I would suggest using PHP Minify, which lets you create a single HTTP request for a group of JS or CSS files. Minify also handles GZipping, Compression, and HTTP Headers for client side caching.
Edit: Minify will also allow you to setup the request so that for different pages you can include different files. For example a core set of JS files along with custom JS code on certain pages or just the core JS files on other pages.
While in development include all the files as you normally would and then when you get closer to switching to production run minify and join all the CSS and JS files into a single HTTP request. It's really easy to setup and get working with.
Also yes, CSS files should be set in the head, and JS files served at the bottom, since JS files can write to your page and can cause massive time-out issues.
Here's how you should include your JS files:
</div> <!-- Closing Footer Div -->
<script type="application/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js"></script>
</body>
</html>
Edit: You can also use Cuzillion to see how your page should be set up.
Here's what I do: I use up to two JavaScript files and generally one CSS file for each page. I figure out which JS files will be common across all of my pages (or enough of them so it's close - the file containing jQuery would be a good candidate) and then I concatenate them and minify them using jsmin-php and then I cache the combined file. If there are any JS files left over that are specific to that one page only, I concatenate, minify, and cache them into a single file as well. The first JS file will be called over a number of pages, the second only on that one or maybe a few.
You can use the same concept with CSS if you like with css-min, though I find I usually only use one file for CSS. One thing extra, when I create the cache file, I put in a little PHP code in the beginning of the file to serve it as a GZipped file, which is actually where you'll get most of your savings anyways. You'll also want to set your expiration header so that the user's browser will have a better chance of caching the file as well. I believe you can also enable GZipping through Apache.
For the caching, I check to see if the file creation time is older than the amount of time that I set. If it is, I recreate the cache file and serve it, otherwise I just get the existing cached file.
You haven't explicitly said that you've got access to a server-side solution, but assuming you do, I've always gone with a method involving using PHP to do the following:
jquery.js.php:
<?php
$jquery = ($_GET['r']) ? explode(',', $_GET['r']) : array('core', 'effects', 'browser', 'cookies', 'center', 'shuffle', 'filestyle', 'metadata');
foreach($jquery as $file)
{
echo file_get_contents('jquery.' . $file . '.js');
}
?>
With the snippet above in place, I then call the file just like I normally would:
<script type="text/javascript" src="jquery.js.php"></script>
and then if I'm ever aware of the precise functionality I'm going to need, I just pass in my requirements as a query string (jquery.js.php?r=core,effects). I do the exact same for my CSS requirements if they're ever as branched.
I would not recommend using a javascript based solution (like PHP Minify) to include your css as your page will become unusable if the visitor has javascript disabled.
The idea of minifying and combining the files is great.
I do something similar on my sites but to ease development I suggest some code which looks like this:
if (evironment == production) {
echo "<style>#import(/Styles/Combined.css);</style>"
} else {
echo "<style>#import(/Styles/File1.css);</style>"
echo "<style>#import(/Styles/File2.css);</style>"
}
This should let you keep your files separate during dev for easy management and use the combined file during deployment for quicker page loads. This assumes you have the ability to combine the files and change variables as part of your deploy process.
Definitely look into including your js at the bottom and the css at the top as per YUI recommendations as keeping the JS low has a tangible affect on the appearance of the rest of the page and feels much faster.
I also tend to copy+paste all of my jquery plugins into a single file: jquery.plugins.js then link to
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">
for the actual jquery library.