I would like to load an external file using javascript. I'm planning to add ad codes in the external file and include it using javascript wherever necessary. This will help me to change ad codes easily when the need arises.
Also I believe various third party solutions such as Google Admanager are complex and unnecessary. So I need your suggestion for the same.
Note : The external file may contain PHP / Javascript source.
What I thought was to add something like this ...
document.write("<script type='text/javascript' src='ad1.js'></script>");
What's your opinion ?
Correct me if I'm wrong, but it sounds like you want to display ad codes separate from the content of the page (such as in iframes). Most ad providers don't like this, since the ads displayed won't be relevant to site content.
Another way to do it however (that makes everyone happy) is to use php's include statement and include the external file. This will dump the contents of the page into the current page, so make sure you don't have multiple <html> elements or inaccurate paths.
I wouldn't use document.write, is that would overwrite the content already on the page, thus making your solution quite static. Try this instead:
function addScript(src) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = src;
document.head.appendChild(script);
}
You'll want to make sure that the page has loaded enough that the document.head is defined. You could use an event listener for this.
Related
I am looking for the method that allows to modify a value/text on my home page with the used link.
For example, if the URL is mywebsite.com/index.php?name=Mike
somewhere on my website, it will say
"Welcome Mike"
If the URL is mywebsite.com/index.php?name=Mark, it will automatically change to
"Welcome Mark"
without changing anything in my code.
Is it possible with HTML only or do I need PHP?
This is possible with HTML, but you need JavaScript. Here's an example:
// Find the query
let query = window.location.search;
// Extract the name
let match = query.match(/name=([^&]+)/);
// If the name exist, put it in the body
if (match) document.body.innerHTML = match[1];
Note that this won't work here, but it will work in the website.
As #JNa0 said, PHP is better suited to this task. The PHP would look like echo $_GET["name"];
You may do it with JavaScript by reading location.search and parse it then modify the DOM (see #AlexH’s answer), but that would be overkilled for such a task. Prefer PHP (or any server-side system) when possible.
Is it possible to load a php file as text with jquery?
$('#loader').load('somefile.php', function(e){
console.log(e);
});
This always interprets/execute the php file but I'm looking for a way to only load it as text, without to resort to renaming my php file as .txt
Is it possible?
Cheers
It is not possible without making any server side modification. The web server will always interpret the php file and return the output. However does not matter what solution you find it'll be very dangereous since you'll be dumping content of your php file to public.
Possible solutions with server side modifications:
Create a PHP file that dumps the content of a file, which name is specified by a url argument
Rename the file (I know the op does not want this, just included since it's an option)
As #nicholas-young suggested, get rid of the PHP tags.
I'm not sure why you need this type of need but I want to emphasize that this might not be a good idea in most of the cases since you'll be make a working PHP file available to public. If you can explain more why you need this we might offer better solutions.
Update:
Create a dumper.php that requires authorization and call this file from the javascript side with passing the filename that you want to be dumped as a parameter (dumper.php?file=index.php)
echo file_get_contents($_GET['file']);
It is of course not possibile.
.load will make an HTTP request to yourwebsite.com/somefile.php hence you will obtain the result of your script not the PHP code inside it.
If you really need the raw code inside your javascript as a string you should output it from the php itself:
<script>
var yourCode = <?=json_encode(file_get_contents('somefile.php')) ?>;
</script>
NO! Would be a major security problem if possible. The header will not matter. If making request towards php file, it will execute prior to delivery.
Use some parameter to print out contents from file instead. But do it in the file itself.
Edit: I thought about a possible solution, but I made another question as it is very specific: see AJAX proxy with PHP, is it possible?
A couple of times I've encountered this problem...
I create sites that have a certain degree of modularity. So, it is possible that there are "components" (think of a rough CMS) which carry their own PHP code, CSS, and JavaScript, all dynamically included. Think about a structure like:
{siteroot}/component/datagrid/datagrid.php
{siteroot}/component/datagrid/js/datagrid.js
{siteroot}/component/datagrid/css/datagrid.css
{siteroot}/component/datagrid/ajax/getsomedata.php
Now, the question is: for JavaScript files, and expecially AJAX calls, how do I make them context-aware with the URLs?
For example, if in datagrid.js I want to call siteroot/component/datagrid/ajax/getsomedata.php with AJAX I should write (with JQuery):
$("#ajax").load("siteroot/component/datagrid/ajax/getsomedata.php");
First problem: siteroot changes on different installations. I've managed that by including a general
var codeBase = <? echo json_encode(Config::$siteRoot); ?>
with PHP on every page, from a Config file that can be easily edited for every installation, so I can do with whatever JavaScript something like:
$("#ajax").load(codeBase + "/component/Datagrid/ajax/getsomedata.php");
What do you think of this approach?
Second problem: but I have PHP functions that return to me also the components folder, or the folder of other components. It would be nice to make the whole URL dynamic. This would account also for changes in the structure of the component if I want.
The only solution I've found is to use a .js.php dynamic Javascript. This is very unelegant, and I have to include all the framework in the JavaScript file, like:
<?php
include "../../libs/framework.php"; // get my functions...
$myUrl = Config::$siteRoot . Framework::getComponentAjaxDir("datagrid") . "/getsomedata.php";
?>
$("#ajax").load(<?=json_encode($myUrl)?>);
Another side effect is that I have to know exactly the include the path for framework.php... I don't want this so hard-codedin my ".js.php" file.
Any smart solutions about that?
As nobody answered in a suitable way, I answer to myself to provide a solution I've found out that can be useful.
The key to my solution is simple:
I create an AJAX proxy at a fixed location in my site structure, so I can use codeBase to reference the proxy from JavaScript
I call this proxy with two parameters: plugin and action, which identify a) the plugin folder in which the "real" ajax is and b) the ajax file to use, along with the other params:
$("#...").load( codeBase + "/main/ajax.php?plugin=Datagrid&action=gettable&otherparams"...)
In ajax.php I sanitize the parameters, and use plugin and action to obtain the "real" ajax file:
{serverRoot}/components/{plugin}/ajax/{action}.php
Then i simply include that file in ajax.php
To be honest your problems are realistic options and aren't that bad practice in general quite frankly.
But let's explore this a little further.
What would be the best approach is for you to have 1 main config.php file which you can then specify modules, i.e. your datagrid etc.
You could store all modules in an array variable like so:
$_SITE_PATH = "/var/www/html/";
$_HTTP_PATH = "http://example.com/";
$_MODULES_PATH = $_SITE_PATH."modules/"
$_MODULES = array(
"datagrid"=>$_MODULES_PATH."datagrid/init.php",
"something_else"=>$_MODULES_PATH."something_else/init.php"
);
Each module would have it's own directory with instantiation init.php so that it would load all it required to get going.
This way you could code as you liked and when you needed something (preferably in the header state) do something like this.
global $_MODULES;
require_once($_MODULES["datagrid"]);
Everything will be easily available as and when required without any variable path issues later down the line.
I have a small problem, I want to load data from a PHP file and put them on a DIV.
Here's the Jquery code
// Store the username in a variable
var jq_username = $("#txt_checkuser").val();
// Prepare the link variable
var link = 'user.php?action=check&username=' + jq_username;
$('div #checkuser_hint').load(link);
So it works! but instead of loading the result (compiled PHP) it loads the PHP code.
If I write the long URL "http://localhost/project..." it doesn't load anything!
Any idea how to do that?
I think you might be accessing your javascript file as a file on your local filesystem, a request to the same directory would go through the filesystem and not through your webserver, processing the PHP into the desired output. This also explains why http://localhost/project for the AJAX call doesn't work: Javascript might be enforcing the same-origin policy on you.
Verify that you're actually accessing this javascript file through http://localhost/ (as opposed to something like file://C:/My PHP Files/ ).
Does the page return anything when you use your browser?
Are you sure it should not be 'div#checkuser_hint' instead of 'div #checkuser_hint' ?
And this looks like the correct way according to the documentation.
var link = 'user.php';
$('div#checkuser_hint').load(link, {'action':'check', 'username':jq_username});
Are you able to access the script manually on your own? (try accessing it via your browser: htp://localhost/...) It may be the case that you're missing your opening <?php and/or closing ?> in the script-file itself.
I occasionally come across pages where some Javascript is included via a PHP file:
<html>
<head>
<script type="text/javascript" src="fake_js.php"></script>
</head>
<body onload="handleLoad();">
</body>
</html>
where the contents of fake_js.php might look something like this:
<?php header('Content-type: text/javascript') ?>
function handleLoad() {
alert('I loaded');
}
What are the advantages (or disadvantages) to including Javascript like this?
It makes it easy to set javascript variables from the server side.
var foo = <?=$foo?>
I usually have one php/javascript file in my projects that I use define any variables that need to be used in javascript. That way I can access constants used on the server-side (css colors, non-sensitive site properties, etc) easily in javascript.
Edit: For example here's a copy of my config.js.php file from the project I'm currently working on.
<?php
require_once "libs/config.php";
if (!function_exists("json_encode")) {
require_once "libs/JSON.php";
}
header("Content-type: text/javascript");
echo "var COLORS = ". json_encode($CSS_COLORS) .";\n";
echo "var DEBUG = ". ((DEBUG == true) ? "true" : "false").";";
?>
If you don't need it, don't use it:
The first thing you need to keep in
mind is YAGNI. You Ain't Gonna
Need It. Until a certain feature,
principle, or guideline becomes useful
and relevant, don't use it.
Disadvantages:
Added complexity
Slower than static files.
Caching problems (server side)
Scalability issues (load balancers offload static files from the heavy PHP/Apache etc processes)
Advantages:
User specific javascript - Can be achieved by initializing with the right variables / parameters in the <head> </head> section of the HTML
Page specific javascript - JS could also be generalized to use parameters
JSON created from database (usually requested via AJAX)
Unless the javascript is truely unique (i.e. JSON, parameters/variables) you don't gain much. But in every case you should minimize the amount of JS generated on the server side and maximize the amount of code in the static files. Don't forget that if it's dynamic, it has to be generated/downloaded again and again so it's not wanted for it to be a heavy process.
Also:
This could also be used to minimize the amount of server configuration (for example if the web server doesn't serve file.js with the correct content type)
There's no benefit for the example you gave above (beyond peculiar deployment scenarios where you have access to .php files and not .js files, which would be insane but not unheard of).
That said, this approach allows you to pass the JS through the php parser - which means you can generate your JS dynamically based on server variables.
Agree with tj111. Apart from what tj mentioned, I also found php-generated javascripts a great weapon to fight the browser's caching tricks. Not that long ago I was cursing the whole javascript for its being constantly cached by the browser. Refreshing the page helped me not, had to clear the whole cache in order to force the browser to reload the javascript files. As soon as I built a php wall in front of my javascripts:
fake_js.php:
<?php
header('Content-type: text/javascript')
include('the_real_javascript.js');
?>
A fresh new javascript would always show up at the client side. However this approach is obviously only good in the development phase, when it can save the developer quite some headache to have the correct javascript loaded in the browser. Of course when connecting to localhost, the penalty of repeatedly loading the same file is not as big.
In a live web application/site client-side caching is welcome to reduce network traffic and overall server load.
Advantage (not PHP specific - I used this technique in EmbPerl and JSP) would be the ability to dynamically generate or tweak/customize the JavaScript code on the server side.
An example usage would be population of an array based on the contents of a DB table.
Or application of localization techniques.
If you don't have full server access and can't turn on gzip encoding then it's pretty useful to put the following in your javascript file (note: will need to be renamed to file.js.php or parsed as PHP through .htaccess directive):
<?php
ob_start( 'ob_gzhandler' );
header("Content-type: text/javascript");
?>
// put all your regular javascript below...
You could also use it for better cache control, visitor tracking, etc in lieu of server-controlled solutions.
Absolutely none, IMHO. I use a js framework that I wrote to handle the setting of whatever server-side variables I need to have access to. It is essentially the same as embedding PHP in JavaScript, but much less ambiguous. Using this method allows you to also completely separate server-side logic and html away from javascript. This results in much cleaner, more organized and lowly-coupled modular code.
You could do something like this in your html:
<script type="text/javascript">
registry = {
myString : '<?php echo $somePhpString; ?>',
myInt : <?php echo $somePhpInteger; ?>
}
</script>
And then do something like this in your js:
if (registry.myInt === 1) {
alert(registry.myString);
}