Can anyone tell me what is the difference between including the js script file in the following two ways,
I made this inside system plugin in joomla and included the js file inside "onAfterInitialise" function.
1)
<script type="text/javascript" src="<?php echo JURI::base(); ?>/plugins/system/test/script/script.js"></script>
This works fine and including the js file correctly, But when I logged-in from the backend the font size from userlisting and listing from other extensions gets enlarged.This is not the issue in my js script.
2)
$document->addScript(JURI::root(). "plugins/system/test/script/script.js");
This works fine without any issues.
Can anyone explain what goes behind this.
Using the second method is simply using Joomla coding standards and adds your script in between the <head> tags.
There isn't much difference except for where the script gets imported on the page.
JURI::base() and JURI::root() are both the same. They both define the root folder for your Joomla site. If you are unsure which one to use, I would recommend using method 2, as it's always good to get used to Joomla coding standards.
You can see the source of addScript() :) Basicly, if you use first method, your srcipt will be added in the same place you wrote the code. Second method will add link to a inner table in $document and will be 'rendered' at the
<head></head>
section at the end of page processing.
Related
What is the difference between following two ways of including a javascript file:
1. Including javascript file directly in the main php page, as:
In main.php : <script type="text/javascript" language="javascript" src="custom-script.js"></script>
versus
2. Including javascript file in a php subpage, which further is included in the main php page, as:
In main.php : <?php include('subpage.php'); ?>
and In subpage.php : <script type="text/javascript" language="javascript" src="custom-script.js"></script>
The only probable difference would be placement of the code which include the js file and hence the difference might be visible on final output HTML, if the functions are dependent in multiple js files.
Note: The placement of the code does matter in execution of the functions dependent on the js
It makes no difference in the end. Either way, the JS file is included by the client's browser.
This is not going to make any difference to the browser.
There is no difference, unless using the sub page makes the <script> tag appear further down the page, in which case the browser won't execute it until it reaches that point.
As far as the browser is concerned, everything is "one page", it is not aware of any includes or divisions across PHP scripts.
It makes no difference to the browser.
However for architecture style is better to have all JS inside separated php file that is included elsewhere.
This way you'll have much better control what you are including (one place control). If you want to add another script later on, you can just add it to subpage.php (better to name this something like javascript-includes-header.php) and you will have another script included on all pages. Same goes for removing a script or if you figure out that script include order is important.
I'm working with my JS files, what i have now is a unique php file with JS header, if a variable is set it includes the real js file, which is fine.
The "home" page has the script tag for the php-js file:
<head>
<script type="text/javascript" language="javascript" src="bootstrap.php"></script>
</head>
the bottstrap.php file has something like:
if(isset($hostData) && !empty($hostData)) {
include('bootstrap.js');
}else {
echo "document.write('<center><bold>PLEASE DO SOMETHING...!</bold></center>');";
}
all that seems to be fine, however when viewing the source code (CTRL+U) the browser shows the "bootstrap.php" part as a link, if clicked it obviously redirects to http://mydomain/bootstrap.php and the js code can be easily seen, which is exactly what i don't want...
So my question is, is there any php-way to know if the file is being loaded from browser's "rendering view" or being loaded from browser's "source code view" ???
Any help is truly appreciated =)
In short, no. You can't hide your script source from your users. The best you can do is obfuscate it using tools like YUICompressor.
There's no way you can hide the javascript code. It needs to be executed by the client, and even if you try to hide it by formatting your code badly, tools like firebug can easily introspect the code and pull out the code.
To be honest I don't think you can actually hide it like that. I'm assuming the best thing you've got to go on is the useragent string but I'm assuming if you "view source" in a browser it would still send the regular headers.
The only way I can think of adding the JS include without it appearing when in view source mode is to actually load the external file via javascript (you could even break the path of the js file into variables so it isn't really human readable) which I would not advise.
If someone wants to get at your javascript they will there no is way of avoiding it.
and the js code can be easily seen, which is exactly what i don't want...
You don't want the JS to be seen, but you do want to use it???
There IS something wrong with your code though if you want the js file to be used in your page.
You need to include / require the file:
<script type="text/javascript" language="javascript" src="<?php include bootstrap.php ?>"></script>
Otherwise the browser will load the contents of the bootstrap file, but you want to run the code inside it (which can only be done at the server).
Also:
change:
include('bootstrap.js');
to
echo bootstrap.js;
EDIT
by re-reading your question (and other answers) that's exactly what you want: make your JS code invisible (correct me if wrong).
The answer to that is: No cannot be done.
You can try to obfuscate the code but it will take someone who wants to see it seconds to 'decode'.
Try using the $_SERVER["HTTP_referer"], which have the url that called this file.
I'm really sorry for disappearing from here...
The best solution I decided to implement is quite simple: don't show ANY URL or PHP files within JS code; so during last months I've used a unique PHP file to do all necessary database queries, a stored procedure generates dynamically all the URL's needed from JS.
In that way URL's vary every time and what I've named "poor logic" goes free for users to view/copy I don't mind that while server data is secure.
THANKS ALL FOR YOUR VALUABLE ANSWERS!!!
I know we can get some path with <?php bloginfo('something');?> into php files, but is it some equivalent for javascript file loaded with the enqueue_script function ?
Did wordpress change some shortcode into those files ?
EDIT : I think I did not clearly express my needs. So i want to know if wordpress had some shortcode who, placed into a js file who is loaded with the enqueue method, will be replaced by the template path. Typically i need to make some ajax call form a .php file from my template and want to avoid hard linking file
No javascript files won't be parsed as php, and as such won't process any shortcodes or php.
Why not just make your links relative. Often I find subdomaining my dev copy, removes any problems when moving a site live and broken links.
You could cheat and link to a php file, which then passes header information as Javascript. Doesn't seem very elegant though. See here.
Or you could just declare the variable in a little bit of inline Javascript and pick it up in the external JS file.
<script type="text/javascript">
var siteURL= '<?php bloginfo('url');?>';
</script>
<script type="text/javascript" src="yourscript.js"></script>
Then in yourscript.js just reference the variable 'siteURL'
You have to register scripts using wp_register_script(). Then by placing wp_enqueue_script before wp_head() it will load them in for you. The idea of using wp_enqueue_script is that you don't need to enter them all in manually, and you can load other scripts depending on whether a certain script has been loaded.
Am sure the question is vague.
Let me try to explain.
Assume zend frame work - PHP - jquery combination.
I include jquery files in layout.phtml.
i include some files in controller.php.
some file in view.phtml
Atlast when i run and view the page . Is there any way or any tool to find which file is included through which file (layout controller or view) ??
In addition can some one explain which is the best way include js files and where . using zend framework in layout or controller or view
The only way to find where a public, static asset (JS, CSS, image, etc) is included is to trawl through the source code (using something that can "find in files" would save time).
In regards to how and where to include such assets... for global includes (common stylesheets, scripts, etc), include these in your layouts.
For specific page includes, place these in your views.
The best way to include a static asset is using the appropriate view helper. These are generally displayed in your layout file, for example
<?php echo $this->doctype() ?>
<html>
<head>
<?php
echo $this->headMeta()->prependHttpEquiv('Content-Type', 'text/html; charset=' . $this->getEncoding());
// I use "prepend" here so it comes before any page specific stylesheets
echo $this->headLink()->prependStylesheet($this->baseUrl('/css/common.css'));
echo $this->headScript();
?>
</head>
<body>
<!-- content -->
<?php echo $this->inlineScript() ?>
</body>
</html>
You can then add to these placeholders in your view scripts, for example
<?php
// index/index.phtml
$this->inlineScript()->appendFile('https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js')
->appendFile($this->baseUrl('/js/my-jquery-script.js'));
To "include" a file means very different things in PHP (where it is analogous to copying and pasting source code from another file into the current file) and HTML/JavaScript (where you are referencing another file, which the browser must make a separate HTTP request to download). What do you consider "including"? Are image tags "including" the images? At least we can easily count those references by examining HTTP requests; from the client side, it's impossible to tell what include()s went into the source code behind the rendered output. Even naive source code searching couldn't tell you thanks to autoloading. As is, your question is not well enough defined to provide a clear answer.
Controversal answer:
You don't need that.
If you need that then it's something wrong with the way your designed your application.
Note: I've learned (trial and error) that 90% of things I don't know how to do and that seem to be impossible in ZF are a result of wrong application design.
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.