how can i show a < script > in html before the page load the content?
<script>
function startTime() {
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('uhrzeit').innerHTML = h+":"+m+":"+s;
var t = setTimeout(function(){startTime()},500);
}
function checkTime(i) {
if (i<10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
</script>
the first one just shows the time of day... more important is the second part. At the moment the website is loading the content and shows me the Edge-Animate animation after the content is complete loaded. And you may mention it sucks that the animation comes after paged is loaded...
<!--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: "none",
centerStage: "none",
minW: "0px",
maxW: "undefined",
width: "100%",
height: "100%"
};
opts.htmlRoot =custHtmlRoot;
AdobeEdge.loadComposition('hin-aktuell', 'EDGE-2489594', opts,
{"dom":{}}, {"dom":{}});
script.onload = script.onreadystatechange = null;
head.removeChild(script);
}
};
head.appendChild(script);
</script>
Related
I have to put the marchex call tracking script in the footer section of the site only if cookie is set,but the site is in square space and i can only use javascript/jquery . I have tried the following code but it seems not triggering, means the number changing is not working.
<script>
window.onload = function () {
if(getCookiee("cpc")!="1" && getCookiee("fb")!="1" )
{
vs_account_id = "xxxxxxxxxx";
var s = document.createElement("script");
s.type = "text/javascript";
s.src = "https://rw1.marchex.io/euinc/number-changer.js";
$("body").append(s);
}
}
</script>
The actual script is :
<script type="text/javascript"><!--
vs_account_id = "xxxxxxxx";
//--></script>
<script type="text/javascript" src="https://rw1.marchex.io/euinc/number-changer.js">
</script>
Thank You
My solution is:
var vs_account_id = "xxxxxxxxxx";
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return '';
}
window.addEventListener('load', function() {
if(getCookie("cpc") != '' && getCookie('fb') != '') {
var body = document.getElementsByTagName('body')[0];
var s = document.createElement("script");
s.type = "text/javascript";
s.src = "https://rw1.marchex.io/euinc/number-changer.js";
body.append(s);
}
});
It is vanilla javascript without jQuery.
I'm adding javascript on my website by this code:
<script type="text/javascript" src="https://www.fileoasis.net/contentlockers/load.php?id=6f29997ae5eebe6d78b97e842d1c3835"></script>
Is any solution to make this script will run/load after few seconds after website loaded?
If there is a function in the external library, load it as usual, then in your main page code add:
// When the DOM is built...
window.addEventListener("DOMContentLoaded", function(){
// Run the named function after the specified delay
setTimeout(externalFunctionName, millisecondDelay);
});
If there is not a named function in that external library, then wrap all the code in that library in a named function and use the technique above.
try this out :
<script>
setTimeout(function()
{
var s = document.createElement("script");
s.type = "text/javascript";
s.src = "https://www.fileoasis.net/contentlockers/load.php?id=6f29997ae5eebe6d78b97e842d1c3835";
$("head").append(s);
} , 3000);//3 seconds
</script>
Several of the answers show how to load the script using jQuery.
Using plain JavaScript:
<script>
function loadScript() {
console.log('Loading');
var secondsToWait = 3;
setTimeout(function() {
var s = document.createElement("script");
s.type = "text/javascript";
s.src = "https://www.fileoasis.net/contentlockers/load.php?id=6f29997ae5eebe6d78b97e842d1c3835";
var head = document.getElementsByTagName("head")[0];
head.appendChild(s);
}, secondsToWait * 1000);
}
window.addEventListener("DOMContentLoaded", loadScript);
</script>
You can verify it loads using the newtwork tab in web developer tools.
Google loads their scripts like this:
<script>
(function(i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function() {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o), m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
</script>
Which is equivalent to this:
var a=document.createElement("script");
a.async = 1;
a.src = "https://www.google-analytics.com/analytics.js";
var m = document.getElementsByTagName("script")[0];
m.parentNode.insertBefore(a, m); //insert the srcipt before the first script on the page.
Which, given that a majority of web pages have a script tag in their <head> tag is the same as using document.getElementsByTagName("head")[0].appendChild.
jQuery loads scripts using the same method of append the created script element to the head tag:
var script, callback;
return {
send: function( _, complete ) {
script = jQuery( "<script>" ).prop( {
charset: s.scriptCharset,
src: s.url
} ).on(
"load error",
callback = function( evt ) {
script.remove();
callback = null;
if ( evt ) {
complete( evt.type === "error" ? 404 : 200, evt.type );
}
}
);
// Use native DOM manipulation to avoid our domManip AJAX trickery
document.head.appendChild( script[ 0 ] );
},
abort: function() {
if ( callback ) {
callback();
}
}
};
how to add multiple google search results only on one page:
my code is this code not working.. I want to view results only without search boxes depending on specific tags :
I'm trying on multiple codessome of them return one search result and ignore the second and some of them not return any thing
function gcseCallback() {
if (document.readyState != 'complete')
return google.setOnLoadCallback(gcseCallback, true);
google.search.cse.element.render({ gname: 'gsearch', div: 'results', tag: 'searchresults-only', attributes: { linkTarget: '' } });
var element = google.search.cse.element.getElement('gsearch');
element.execute('Specific tag');
};
window.__gcse = {
parsetags: 'explicit',
callback: gcseCallback
};
(function () {
var cx = '00999830932:uhtgng';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<div id="results"></div>
function gcseCallback() {
if (document.readyState != 'complete')
return google.setOnLoadCallback(gcseCallback, true);
google.search.cse.element.render({ gname: 'gsearch', div: 'results22', tag: 'searchresults-only', attributes: { linkTarget: '' } });
var element = google.search.cse.element.getElement('gsearch');
element.execute('Other Tag');
};
window.__gcse = {
parsetags: 'explicit',
callback: gcseCallback
};
(function () {
var cx = '0099983093302884:uhti3ng';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<div id="results22"></div>
I found the solution Put every search section in an separated then call the two iframes in your page
var script = document.createElement('script');
script.src = "//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js";
script.type='text/javascript';
var done = false;
script.onload = script.onreadystatechange = function() {
if (!done && (!this.readyState || this.readyState == "loaded" || this.readyState == "complete")) {
done = true;
promptForUserEntries();
}
};
document.getElementsByTagName("head")[0].appendChild(script);
This inject one script in the first Head. I have three other scripts and I insert theme by the same way, now I'm looking for how to insert multiple script in a Tag in one time.
Thank you
var scripts = ["/path/to/script.js", "/path/to/script2.js"];
for (index = 0; index < scripts.length; ++index) {
var script = document.createElement('script');
script.src = scripts[index];
script.type='text/javascript';
var done = false;
script.onload = script.onreadystatechange = function() {
if (!done && (!this.readyState || this.readyState == "loaded" || this.readyState == "complete")) {
done = true;
//promptForUserEntries();
}
};
document.getElementsByTagName("head")[0].appendChild(script);
}
This will loop through your array of scripts to append, and append them
Here is a modified solution based on Ole's answer. It allows for both scripts with src tags and script blocks - Useful for loading Google Analytics code after cookie consent, for example.
/**
* Append a block of script code to the head
* Code can contain scripts with src attribute
* and script blocks
*/
function appendScriptBlocks (code) {
let tempEl = document.createElement('div')
tempEl.innerHTML = code
let scripts = tempEl.getElementsByTagName('script')
for (let index = 0; index < scripts.length; ++index) {
var script = document.createElement('script');
script.type= 'text/javascript';
if(scripts[index].src) {
script.src = scripts[index].src;
}
else {
script.innerHTML = scripts[index].innerHTML
eval(scripts[index].innerHTML)
}
document.getElementsByTagName('head')[0].appendChild(script);
}
}
I have a service of job portal which other users can use for their sites and blogs. they copy embed code from my site, paste it in their site and display job board in their webpage. how create this embed code anyone can help me.
Here is example monster.com publisher website.
click Get sample code button.
<div id="MonsterJobSearchResultPlaceHolderIy8AAA_e_e" class="xmns_distroph"></div>
<script type="text/javascript">
(function() {
var oScript = document.createElement('script');
oScript.type = 'text/javascript';
oScript.async = true;
oScript.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'publisher.monster.com/Services/WidgetHandler.ashx?WidgetID=EAAQgDMlA5vzabXFzuv86ZpLpA--&Verb=Initialize';
var oParent = document.getElementsByTagName('script')[0];
oParent.parentNode.insertBefore(oScript, oParent);
})();
</script>
<a id="monsterBrowseLinkIy8AAA_e_e" class="monsterBrowseLink fnt4" href="http://jobsearch.monster.com/browse/">View More Job Search Results</a>
there are many ways to reach your goal. As you didn't explain your need explicitly, I just provide a simple example:
<script type='text/javascript' charset='utf-8'>
var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
iframe.src = 'URL OF CONTENT YOU WANT TO PROVIDE';
iframe.width = 'THE WIDTH YOU WANT';
iframe.height = 'THE HEIGHT YOU WANT';
</script>
modify the code according to your need
escape this code in your html
have fun with your awesome embedded widget!
How To Create Embed With Javascript in .cs
Note: localhost:3197/website/js/embed/form.js'; // give your js path
FormBuilder(921,'MjEzNjkxMjU='); in this method first parameter give your form height and second your form name or Id. there Id is encoded format
StringBuilder sb = new StringBuilder();
sb.Append("<script type='text/javascript'>");
sb.Append("(function(d, t) { var s = d.createElement(t), options = {");
sb.Append("'async':true };");
sb.Append("s.src = ('https:' == d.location.protocol ? 'https://' : 'http://') + 'localhost:3197/website/js/embed/form.js';");
sb.Append("s.onload = s.onreadystatechange = function() {");
sb.Append("var rs = this.readyState; if (rs) if (rs != 'complete') if (rs != 'loaded') return;");
sb.Append("try { frm = new FormBuilder("+Form Height+",'"+FormId+"');frm.initialize(options);frm.display(); }");
sb.Append("catch (e) {}};");
sb.Append("var scr = d.getElementsByTagName(t)[0], par = scr.parentNode; par.insertBefore(s, scr);");
sb.Append("})(document, 'script');</script>");
txtjavascript.Value = sb.ToString(); // text box name
After Create embed script Simple and Easy Way Paste this script where you want to show in other page after that
(function(d, t) { var s =
d.createElement(t), options = {'async':true }; s.src = ('https:' ==
d.location.protocol ? 'https://' : 'http://') +
'localhost:3197/website/js/embed/form.js'; s.onload =
s.onreadystatechange = function() {var rs = this.readyState; if (rs)
if (rs != 'complete') if (rs != 'loaded') return; try { frm = new
FormBuilder(921,'MjEzNjkxMjU='); frm.initialize(options);
frm.display(); }catch (e) {}}; var scr =
d.getElementsByTagName(t)[0], par = scr.parentNode;
par.insertBefore(s, scr);})(document, 'script');
After That in your js file Create fuction like this and create iFrame ans create querystring where you fetch the form from database.
function FormBuilder(fHeight, formid) {
var iframe = document.createElement('iframe');
iframe.style = "height:" + fHeight + "px; width:100%; border:none";
iframe.setAttribute('allowTransparency', true);
iframe.frameBorder = "0";
iframe.scrolling = "no";
iframe.src = "http://localhost:3197/form/show-form?id="+ formid;
document.body.appendChild(iframe);
}