I am trying to create a new window dynamically using window.open() and $(document).ready( function() { ... }); I got it working on Chrome and Internet Explorer but firefox is not trigering the jQuery code. See code below:
index.html code:
<html>
<head>
</head>
<body>
Link
<script type="text/javascript">
function showDetails(name, timeStamp)
{
var w = window.open("", timeStamp);
var s = w.document.createElement("script");
s.type = "text/javascript";
s.src = "var eventArray = [];";
w.document.body.appendChild(s);
var s = w.document.createElement("script");
s.type = "text/javascript";
s.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js";
w.document.body.appendChild(s);
var s = w.document.createElement("script");
s.type = "text/javascript";
s.src = "test.js";
w.document.body.appendChild(s);
w.document.title = name;
w.document.close();
return false;
}
</script>
</body>
test.js code:
alert("executing js file");
$(document).ready( function()
{
alert("document ready fired");
});
The first alert "executing js file" is executing but not the second one "document ready fired".
Any idea how can I make this work on firefox?
NOTE:
w.document.close(); and return false; is added following this post but still not working...
jquery is loading properly
thank you very much in advance
My inner sense says:
s.src = "jquery1.10.2.js";
should be:
s.src = "jquery-1.10.2.js";
Or any valid url that points to jquery.
Why you always use same variable names? Could you please try it like:
<script type="text/javascript">
function showDetails(name, timeStamp) {
var w = window.open("", timeStamp);
var s1 = w.document.createElement("script");
s1.type = "text/javascript";
s1.src = "var eventArray = [];";
w.document.body.appendChild(s1);
var s2 = w.document.createElement("script");
s2.type = "text/javascript";
s2.src = "jquery1.10.2.js";
w.document.body.appendChild(s2);
var s3 = w.document.createElement("script");
s3.type = "text/javascript";
s3.src = "test.js";
w.document.body.appendChild(s3);
w.document.title = name;
w.document.close();
return false;
}
</script>
Related
I have had the website for 3 years. This website is created by HTML, CSS, and JavaScript. I have made it by myself and there is always a WhatsApp icon at the bottom of the right. But 6 months ago, it disappeared. I looked up my code and there are no changes. How can I make my WhatsApp ıcon visible again?
Here is my code:
<script type="text/javascript">
(function () {
var options = {
whatsapp: "+9000000000", // Contact Number
call_to_action: "Merhaba, Size nasıl yardımcı olabilirim?",
position: "right",
};
var proto = document.location.protocol, host = "whatshelp.io", url = proto + "//static." + host;
var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = url + '/widget-send-button/js/init.js';
s.onload = function () { WhWidgetSendButton.init(host, proto, options); };
var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x);
})();
//</script>
The domain whatshelp.io is currently timing out, which is probably why the buttons are not working.
Based on archive.org, it appears at some point the site started to redirect to bothelp.io. However, updating the script to https://static.bothelp.io/widget-send-button/js/init.js returns a 404.
After some googling, I landed on this page: https://apps.shopify.com/whatshelp-chat-button
The description noted the following:
The GetButton widget (former WhatsHelp widget) takes website visitor directly...
Again, updated the script to https://static.getbutton.io/widget/bundle.js and success!
I then updated the configuration script you provided to the following (formatted for legibility):
<script type="text/javascript">
(function () {
var options = {
whatsapp: "+9000000000", // Contact Number
call_to_action: "Merhaba, Size nasıl yardımcı olabilirim?",
position: "right",
};
var proto = document.location.protocol,
host = "getbutton.io",
url = proto + "//static." + host;
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = url + '/widget-send-button/js/init.js';
s.onload = function () { WhWidgetSendButton.init(host, proto, options); };
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
})();
</script>
And saw the following:
How to show code external JavaScript in alert or anywhere because is value of variable s_code
(function(){
var newscript = document.createElement('script');
newscript.type = 'text/javascript';
newscript.async = true;
newscript.src = 'http://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js?'+Math.random();
s_code = newscript.toString();
alert(s_code);
})();
Only using plain JavaScript without external library.
Using jQuery's $.get you can do this way:
$(function () {
$.get("https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js", function (res) {
alert(res);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Fiddle: https://jsfiddle.net/aahedi/y0v4kz3u/1/
I am loading my JavaScript files dynamically in the page:
<html>
<head>
<script type="text/javascript">
window.onload = function () {
var script1 = document.createElement('script'),
script2 = document.createElement('script'),
script3 = document.createElement('script');
script1.type = 'text/javascript';
script1.src = 'myScript1.js';
script2.type = 'text/javascript';
script2.src = 'myScript2.js';
script3.type = 'text/javascript';
script3.src = 'myScript3.js';
document.body.appendChild(script1);
document.body.appendChild(script2);
document.body.appendChild(script3);
}
</script>
</head>
<body>
</body>
</html>
I need to know when these Scripts loaded completely. Is there any workaround or code snippets to do this?
before document.body.appendChild
scrimpt1.addEventListener('load', function() { console.log('loaded'); });
obviously you'll want to do "something useful" instead of the simple console.log I've shown
BUT ... this isn't always realiable
try this
var numScripts;
function scriptLoaded() {
numScripts --;
if(numScripts == 0) {
console.log('huzzah all scripts loaded');
}
}
then, your code
window.onload = function () {
var script1 = document.createElement('script'),
script2 = document.createElement('script'),
script3 = document.createElement('script');
numScripts = 3;
script1.type = 'text/javascript';
script1.src = 'myScript1.js';
script2.type = 'text/javascript';
script2.src = 'myScript2.js';
script3.type = 'text/javascript';
script3.src = 'myScript3.js';
document.body.appendChild(script1);
document.body.appendChild(script2);
document.body.appendChild(script3);
}
at the end of each of your scripts, put something like
if(windows.scriptLoaded) {
scriptLoaded();
}
Use a callback
function greetFinished() {
alert("Do stuff finished");
}
function greet (greeting, callback) {
alert(greeting)
callback (options);
}
greet("Hello",greetFinished);
greetFinished will be called inside the greet function greetFinished is a callback it will be called after the alert.
I have the below code that will dynamically create the script tag.
<html>
<head>
<title>Applying</title>
</head>
<body>
<script>
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,
function(m,key,value) {
vars[key] = value;
});
return vars;
}
var variable1 = getUrlVars()["parameter1"];
var myScript = document.createElement('script');
myScript.setAttribute('type', 'text/javascript');
myScript.setAttribute('urlId', '420');
myScript.setAttribute('dataTitle', variable1);
myScript.setAttribute('dataemail', 'admin#domain.net');
document.body.appendChild(myScript);
</script>
<input name="Apply" type="button" id="Apply" value="Apply" ONCLICK="window.location.href='https://www.google.com?'">
</body>
</html>
But somehow the above code doesn't work in IE but it works fine in Chrome. I am not sure what is the reason? Can anybody help me with that?
This whole things doesn't work in IE.
var myScript = document.createElement('script');
myScript.setAttribute('type', 'text/javascript');
myScript.setAttribute('urlId', '420');
myScript.setAttribute('dataTitle', variable1);
myScript.setAttribute('dataemail', 'admin#domain.net');
document.body.appendChild(myScript);
You can dynamically add a script element using the following function.
var create_script = function(data) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.text = data;
//if you have to debug dynamically loaded script in chrome use the following - sourceURL has changed in the recent versions of chrome devetools.
//script.text = data + "\n\n //# sourceURL=" + ns + ".js\n";
//append the script element to body or head or where it seems fit.
document.body.appendChild(script);
}
the "data" parameter is the actual javascript code/URL that will form the part of the script tag. You are missing this in your code.
EDIT:
for non-standard attributes you might want to change the doctype according to http://www.w3schools.com/DTD/dtd_attributes.asp
On thirdpartydomain.com I want to embed a simple <script> tag that pulls in a script from mydomain.com/myscript.js, which simply creates a little <div> and pulls partial page content from mydomain.com/mypage.htm.
Here's the script, adapted from: How to embed Javascript widget that depends on jQuery into an unknown environment
var myEmbedId = '12345';
var myEmbedContainerId = 'myEmbedContainer_' + myEmbedId;
document.write('<div id="' + myEmbedContainerId + '">IF ALL GOES WELL, THIS TEXT WILL BE REPLACED WITH MYPAGE.HTM CONTENTS');
document.write('</div>');
(function (window, document, version, callback) {
var j, d;
var loaded = false;
if (!(j = window.jQuery) || version > j.fn.jquery || callback(j, loaded)) {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://mydomain.com/jquery-1.4.1.min.js";
script.onload = script.onreadystatechange = function () {
if (!loaded && (!(d = this.readyState) || d == "loaded" || d == "complete")) {
callback((j = window.jQuery).noConflict(1), loaded = true);
j(script).remove();
}
};
document.documentElement.childNodes[0].appendChild(script)
}
})(window, document, "1.3", function ($, jquery_loaded) {
$(document).ready(function () {
alert('jquery loaded!');
var myRefreshUrl = 'http://mydomain.com/mypage.htm';
alert('refreshing from ' + myRefreshUrl);
$.get(myRefreshUrl, function(data){
var returnData = data;
alert('return data: ' + data);
$('#' + myEmbedContainerId).html(data); });
alert('load complete v2');
});
});
In IE, I get an Access Denied error from Javascript; in Firefox I just get no data returned.
What's wrong with this?
You cannot create an AJAX request to a different domain from the one that is hosting the current window context.
To pull off what you're describing, you can do something like:
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://mydomain.com/dynamic.js?data=somepage.htm';
someContainer.appendChild(script);
Within that dynamic.js, you can wrap the HTML contents in a document.write(). The net effect is the same as inserting the result of the AJAX request at the same point in the DOM.