The onload="" method in html stays for "Fires after the page is finished loading"
I need a method that loads the < script > part directly at FIRST while the page is loading.
<!doctype html>
<html>
<head>
<!--Adobe Edge Runtime-->
<script>
var custHtmlRoot="hin-aktuell/Assets/";
var script = document.createElement('script');
script.type= "text/javascript";
script.src = custHtmlRoot+"edge_includes/edge.6.0.0.min.js";
var head = document.getElementsByTagName('head')[0], done=false;
script.onload = script.onreadystatechange = function(){
if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
done=true;
var opts ={
scaleToFit: "width",
centerStage: "none",
minW: "0px",
maxW: "undefined",
width: "1366px",
height: "768px"
};
opts.htmlRoot =custHtmlRoot;
AdobeEdge.loadComposition('hin-aktuell', 'EDGE-2489594', opts,
{"style":{"${symbolSelector}":{"isStage":"true","rect":["undefined","undefined","1366px","768px"],"fill":["rgba(255,255,255,1)"]}},"dom":{}}, {"dom":{}});
script.onload = script.onreadystatechange = null;
head.removeChild(script);
}
};
head.appendChild(script);
</script>
<style>
.edgeLoad-EDGE-2489594 { visibility:hidden; }
</style>
<!--Adobe Edge Runtime End-->
<script> alert(1); </script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title>NC | Allgemeines</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="feed.css">
</head>
here is the body part
<body>
<div id="EdgeStage">
<div id="Stage" class="EDGE-2489594"></div>
</div>
<div id="feeds">
<?php
$html = "";
$url = "http://www.yoursite.com";
$xml = simplexml_load_file($url);
for($i = 0; $i < 1; $i++){
$description = $xml->channel->item[$i]->description;
preg_match("/<img[^>]+\>/i", $description, $matches);
if (isset($matches[0])) {
$html .= $matches[0];
} else {
echo "No img";
}
}
echo $html;
?>
<div/>
</body>
now thats the hole file...
A page executes in order. If you place your script as the very first thing in <head>, it will execute before anything else. Note that due to its timing, the page's <body> will not exist yet (nor, in fact, anything else in <head>).
There is no event for when page starts loading, since there can't possibly be any code to handle such an event at that time. At least your <script> element needs to be loaded first.
Related
I am new to PHP-PDO and need some assistance. My application routes all controllers to the index.php though a routes.php file. For example, when my sign-up form is submitted the form is handled action=index.php?controller=signup&action=createuser. The routes.php computes this creates a new signupcontroller($_POST) object and calls createuser(). Once the user is created a welcome page is required_once, which, with javascript, I build a grid of check-boxes. After the check-boxes are built with jquery onchange that makes a ajax call, or supposed to create an ajax, but does not work.
The url is suppose to send params with it to change the controller and action in order to call an appropriate function, and store the check-box option. However, when I check the box nothing happens.
ajax call:
$('#interests').on('change', 'input', function (e){
e.preventDefault();
var str = $('#interests').serialize();
$.ajax({
type: 'POST',
url: 'index.php?controller=interest&action=set_user_interest',
async: true,
traditional: true,
data: str,
success: function (msg) {
console.log(msg);
}
});
});
routes.php
function call($controller, $action){
require_once('controllers/' . $controller . '_controller.php');
// create a new instance of the needed controller
switch($controller) {
case 'interest':
require_once 'models/interest.php';
$controller = new InterestController();
}
// call the action
$controller->{ $action }();
}
// just a list of the controllers we have and their actions
// we consider those "allowed" values
$controllers = array(
'interest'=>['set_user_interest', 'error']
);
// check that the requested controller and action are both allowed
// if someone tries to access something else he will be redirected to the error action of the pages controller
if (array_key_exists($controller, $controllers)) {
if (in_array($action, $controllers[$controller])) {
call($controller, $action);
} else {
call('landing', 'error');
}
} else {
call('landing', 'error');
}
index.php
<?php
session_start();
require_once('greenCupOfWater.inc');
if (isset($_GET['controller']) && isset($_GET['action'])) {
$controller = $_GET['controller'];
$action = $_GET['action'];
} else {
$controller = 'landing';
$action = 'landing_page';
}
require_once 'views/layout.php';
?>
layout.php
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1">
<title>Witit</title>
<link rel="icon" type="image/png" sizes="32x32" href="../images/icons/favicon-32x32.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link href="https://fonts.googleapis.com/css?family=Work+Sans:100" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="stylesheets/master.css">
<link rel="stylesheet" href="stylesheets/welcome.css">
<link rel="stylesheet" href='stylesheets/<?php echo $controller ?>.css'>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<?php include 'routes.php'; ?>
<script src="scripts/main.js" charset="utf-8"></script>
<script src="scripts/modalHelper.js" charset="utf-8"></script>
</body>
</html>
javascript files:
function build_interest(it, src){
var intrst = it;
var htag = it+"-header";
//var chng = 'this.form.submit()';
var ctr = document.createElement('div');
ctr.setAttribute('class', 'interest_container');
var lbl = document.createElement('label');
lbl.setAttribute('for', intrst);
var img = document.createElement('img');
img.setAttribute('src', src);
var title = document.createElement('h2');
title.setAttribute('id', htag);
var inp_f =document.createElement('input');
inp_f.setAttribute('type', 'hidden');
inp_f.setAttribute('name', intrst);
inp_f.setAttribute('value', 0);
var inp = document.createElement('input');
inp.setAttribute('type', 'checkbox');
inp.setAttribute('id', intrst);
inp.setAttribute('name', intrst);
inp.setAttribute('value', 1);
lbl.appendChild(img);
ctr.appendChild(lbl);
ctr.appendChild(inp_f);
ctr.appendChild(inp);
ctr.appendChild(title);
var elem = document.getElementById('interests');
elem.appendChild(ctr);
document.getElementById(htag).innerHTML = it;
}
function myFunc(obj) {
var num = 0;
for (var src in obj) {
if ((obj.hasOwnProperty(src))&&(obj[num].Interests_Pix!==null)) {
build_interest(obj[num].Interests, obj[num].Interests_Pix);
}
++num;
}
}
I have only ever loaded in a JS library in the head of an html doc like so
<head>
<script src="somelink.js" />
</head>
My question is, can I load this script from within a function and if so what would that look like?
function() {
src="somelink.js"
return somemethod.bla;
}
Would that work? Presumably not.
I have my reasons for wanting to do this but will leave them out of the question for now.
Is it possible to load in a library from within a function and if so what would that look like?
Try this :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>load demo</title>
<style>
body {
font-size: 12px;
font-family: Arial;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<b>Successful Response (should be blank):</b>
<div id="success"></div>
<b>Error Response:</b>
<div id="error"></div>
<script>
$( "#success" ).load( "somelink.js", function( response, status, xhr ) {
if ( status == "error" ) {
var msg = "Sorry but there was an error: ";
$( "#error" ).html( msg + xhr.status + " " + xhr.statusText );
}
});
</script>
</body>
</html>
Here's how it's done in script.js. https://github.com/ded/script.js/
var el = doc.createElement("script"),
loaded = false;
el.onload = el.onreadystatechange = function () {
if ((el.readyState && el.readyState !== "complete" && el.readyState !== "loaded") || loaded) {
return false;
}
el.onload = el.onreadystatechange = null;
loaded = true;
// done!
};
el.async = true;
el.src = "script-to-load.js";
document.getElementsByTagName('head')[0].insertBefore(el, head.firstChild);
If you use the script.js library then you can load a script like this.
$script('script-to-load.js');
Below is my Geo Redirect Code that needs change,**What I would like is to add a meta redirect if possible so an eg would be:-
<html>
<head>
<title>GEO Redirect- Working Demo</title>
<!-- GEO Redirect -->
<script type="application/javascript">
function getgeoip(json){
if(json.country_code == "US"){
window.location = "http://msn.com/"
<!-- Can the above line be replaced to: <META HTTP-EQUIV='Refresh' CONTENT='0; URL=msn.com'> -->
} else {
window.location = "http://google.com/"
<!-- Can the above line be replaced to: <META HTTP-EQUIV='Refresh' CONTENT='0; URL=google.com'> -->
}
}
</script>
<script type="application/javascript" src="http://www.telize.com/geoip?callback=getgeoip"></script>
</head>
</html>
Guys any help would be highly appreciated, thanks again.
If using jquery;
$('head').append('<META HTTP-EQUIV="Refresh" CONTENT="0; URL=msn.com">');
or javascript:
var meta = document.createElement('meta');
meta.httpEquiv = "Refresh";
meta.content = "0; URL=msn.com";
document.getElementsByTagName('head')[0].appendChild(meta);
However, the rendering mode is fixed when the page is loaded, so this will most probably not work as you want it to...
If you're trying to redirect after some time, then you could do this:
<html>
<head>
<title>GEO Redirect- Working Demo</title>
<!-- GEO Redirect -->
<script type="application/javascript">
function getgeoip(json){
if(json.country_code == "US"){
// will redirect to this page, but only after 2 secs.
setTimeout(function () { window.location.href = "http://msn.com/"; }, 2000);
} else {
// will redirect to this page, but only after 2 secs.
setTimeout(function () { window.location.href = "http://google.com/"; }, 2000);
}
}
</script>
<script type="application/javascript" src="http://www.telize.com/geoip?callback=getgeoip"></script>
</head>
</html>
I want to load js on the fly which is happening but the one more js file which is included in index is loading before (file i am loading dynamically) is there way to fix the order
i am adding global.js dynamically and i want variable declared in global.js shoud be initialised before dynamicjs.DynamicJs is loaded
------------- Index.html -------------
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.commons"
data-sap-ui-theme="sap_goldreflection" >
</script>
<!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->
<script src="js/dyn.js"></script>
<script></script>
<script>
sap.ui.localResources("dynamicjs");
var view = sap.ui.view({id:"idDynamicJs1", viewName:"dynamicjs.DynamicJs", type:sap.ui.core.mvc.ViewType.JS});
view.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
function loadScript(url){
var xhrObj = createXMLHTTPObject();
// open and send a synchronous request
xhrObj.open('GET', url, false);
xhrObj.send('');
var e = document.getElementsByTagName("script")[1];
var d = document.createElement('script');
d.src = url;
d.type = 'text/javascript';
d.async = false;
d.defer = false;
e.parentNode.insertBefore(d,e);
}
function addScriptDynamically(){
loadScript('js/global.js'+'?scheme=12345');
}
function createXMLHTTPObject(){
var xmlhttp=new XMLHttpRequest();
if( typeof xmlhttp == 'undefined' || xmlhttp == null )
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
return xmlhttp;
}
/*call function */
addScriptDynamically();
Why won't you try to load script with jQuery.getScript()
http://api.jquery.com/jQuery.getScript/
If you want compatibility with other libraries like prototype or mootools you can set jQuery.noConflict()
My source code :
<!doctype html>
<html>
<head>
<title>onload test</title>
<link type="text/css" rel="stylesheet" href="spot.css" media="screen" />
</head>
<body>
<h1>Welcome Page</h1>
<script>
debugger;
function constructScripts(url, callBack) {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
if (script.readyState) {
script.onreadystatechange = function () {
if (script.readyState == "loaded" || script.readyState == "complete") {
script.onreadystatechange = null; callBack();
}
};
}
else {
script.onload = callBack;
}
}
</script>
<script>
debugger;
myCallBack = function () {
alert(this.src + "loaded");
}
constructScripts("files1", myCallBack);
constructScripts("files2", myCallBack);
constructScripts("files3", myCallBack);
</script>
</body>
</html>
this.src is undefined here. I guess this should be an 'script' object which supposed to have its src property so that I can read the filename. Who is this here? And also when I view the page source these scripts were not included in the header() section. Why is it so?
this.src is undefined here.
It shouldn't be… It is defined earlier: script.src = url
I guess this should be an 'script' object which supposed to have its src property so that i can read the filename. Who is 'this' here?
The script element upon which the onload or readystatechange event fires
And also when i view the page source these scripts were not included in the header() section. Why is it so?
Because you are looking at the page source, not a serialisation of the live DOM after it has been manipulated by JavaScript.
When you call you callBack function, pass it the script object like callBack(script). Modify the callBack function like
myCallBack = function (script) {
alert(script.src + "loaded");
}
View source does not show dinamically loaded elements.
You need to extend your function using prototype.
Element.prototype.MyMethod = function(){}
Look at your edited code
<!doctype html>
<html>
<head>
<title>onload test</title>
<link type="text/css" rel="stylesheet" href="spot.css" media="screen" />
</head>
<body>
<h1>Welcome Page</h1>
<script>
Element.prototype.MyMethod = function(){}
function constructScripts(url, callBack) {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = url;
script.MyMethod = callBack;
document.getElementsByTagName("head")[0].appendChild(script);
if (script.readyState) {
script.onreadystatechange = function () {
if (script.readyState == "loaded" || script.readyState == "complete") {
script.onreadystatechange = null;
script.MyMethod();
}
};
}
else {
script.onload = callBack;
}
}
</script>
<script>
myCallBack = function () {
alert(this.src + "loaded");
}
constructScripts("files1", myCallBack);
constructScripts("files2", myCallBack);
constructScripts("files3", myCallBack);
</script>
</body>
</html>