Ok, So I am writing a bookmarklet which will hopefully eventully turn into a plugin that will check the current url and then redirect them to another page based on that URL. The problem I an running into is that one of my functions is running before the new js file is included. An example would be me loading jquery and sweet alert then running the sweet alert function:
function loadElements() {
var addjquery = document.createElement('script');
addjquery.src = '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js';
document.head.appendChild(addjquery);
// Then add sweet alert js/css
}
function runstuff() {
swal("Its good!!","yay","success");
}
Then I run the two back to back
loadElements();
runstuff();
Now what happens is when I run this bookmarklet is I get an error stating that swal is not defined. But when I run it a second time it works perfectly fine and as expected. Any ideas how I can delay the "runstuff" function from running until the javascript is loaded?
You need a callback when the script is loaded, it's asynchronous:
addjquery.addEventListener('load', function (e) {
alert('jQuery Loaded');
console.log(e);
runStuff();
}, false);
Fiddle
Related
I'm very new to JS im having an issue at the moment where my axe chrome extension isn't matching up with the below script. A suggestion would be to wait for the page to load however Im a bit confused about what to use and where to use it? Hoping that waiting for the page load will allow me to view the AA issues that aren't being pulled through.
const driver = new WebDriver.Builder().forBrowser('chrome').build();
driver.get('MySite').then( () => {
new AxeBuilder(driver).withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa', 'best-practice', 'wcag***', 'act', 'section508', 'section508.*.*', 'experimental', 'cat.*', 'color-contrast'])
.analyze((err, results) => {
if (err) {
// Handle error somehow
}
console.log(results.violations);
});
});
For classic scripts, if the async attribute is present, then the classic script will be fetched in parallel to parsing and evaluated as soon as it is available.
read this:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-async
To wait for the page to load, wrap your script in the following:
window.onload = function() {
// ...your code here...
}
See onload documentation.
Alternatively, move the <script> tag to the bottom of the HTML (and don't use the async attribute).
I am attempting to run a script in a webpage, that should be executed in an <iframe>. Right now I can call a function that is set within the <iframe>.. I'm just having issues running a script to the <iframe>'s context.
Here's how I run a function set in the <iframe>
$('#iframe').get(0).contentWindow.performSearch();
Now instead of calling the preformSearch function, I wish to run a script - for this example, this is the script...
console.log('worked!');
My actual script is a big one, so I won't put it here - for the sake of this question.
So, is there any way to run that script through the <iframe>'s context? For example, my first guess would be/was..
$('#iframe').get(0).contentWindow.function(){
console.log('worked!');
}
I've never messed with running functions through something like an <iframe> before though, so I'm stumped.
Thanks for any help in advance!
NOTE I am using NW.js (Node-Webkit) to remove all <iframe> restrictions.
NOTE v2 The preformSearch() function was just a reforence on how I call functions in the frame.
You could try and use the messaging mechanizm
which means that on the parent frame you could send the message with
var win =$("#iframe").contentWindow;
win.postMessage({ messageType: "predefinedMessage", features: data }, '*');
and than in the iframe you could get the message
function FrameCommunicator(attachManager) {
var mfilesFrame;
function _actOnMessage(data) {
if (data.messageType === "predefinedMessage") {
//perform here what you need
}
}
window.addEventListener("message", function (e) {
var data = e.data;
mfilesFrame = e.source;
_actOnMessage(data);
}, false);
}
now the thing is that the iframe and the parent fram can have the same code if they reference to the remotely.
Another way would be just to send the content of the message as JS and run it with eval , but that is risky , bad practice and lotsa other things :)
this is my first time to post here on stackoverflow.
My problem is simple (I think). I am tasked to allow users to sign up using either Facebook, Google Plus, LinkedIn and Twitter. Now, what I want to do is when the user clicks the Social Network button, it will redirect them to the registration page with a flag that determines which social network they want to use. No problem here.
I want to load each API dynamically depending on which social network they choose.
I have a problem when loading the Google JS API, dynamically. The sample found in here loads client.js in a straightforward manner. I have no problems if I follow the sample code. But I want to load it dynamically.
I tried using $.ajax, $.getScript and even tried adding the script to the page just like how you call Google Analytics asynchronously. None of the above worked. My call back function is NOT called all the time. Also, if i call the setApiKey from the call back function of $.ajax and $.getScript, the gapi.client is NULL. I don't know what to do next.
Codes that did not work:
(function () {
var gpjs = document.createElement('script'); gpjs.type = 'text/javascript'; gpjs.async = false;
gpjs.src = 'https://apis.google.com/js/client.js?onload=onClientLoadHandler';
var sgp = document.getElementsByTagName('script')[0]; sgp.parentNode.insertBefore(gpjs, sgp);})();
Using $.getScript
$.getScript("https://apis.google.com/js/client.js?onload=onClientLoadHandler", function () {
console.log("GP JS file loaded.");
SetKeyCheckAuthority();});
Using $.ajax
$(document).ready(function () {
$.ajax({
url: "https://apis.google.com/js/client.js?onload=onClientLoad",
dataType: "script",
success: function () {
console.log("GP load successful");
SetKeyCheckAuthority();
},
error: function () { console.log("GP load failed"); },
complete: function () { console.log("GP load complete"); }
});});
May I know what is the proper way of calling this js file dynamically? Any help would be appreciated. Thank you.
Ok, I just thought of a solution but i think it's a bad one. Please let me know what you think of it.
i used $.getScript to load the js file
$.getScript("https://apis.google.com/js/client.js?onload=onClientLoadHandler", function () {
console.log("GP JS file loaded.");
SetKeyCheckAuthority();});
and then on my SetKeyCheckAuthority function i placed a condition to call itself after 1 second when gapi.client is null.
function SetKeyCheckAuthority() {
if(null == gapi.client) {
window.setTimeout(SetKeyCheckAuthority,1000);
return;
}
//set API key and check for authorization here }
I have a set of URLs which I use page.open() to open. After processing the contents, I then call page.release() on the page and then call the function to open another page recursively. The webpage has javascript on it, and I test for a condition showing when the javascript has loaded results. The first page.open() call loads the JS in 1 second but all subsequent calls take about 6seconds. I am using page.release() and the pages loaded aren't blank and phantomjs is not crashing. I am wondering why this is happening. I've also tried using page.close()
doAnalysis = function (i) {
var url = 'http://myurl.com';
page.open(url, function(status) {
//get html and process it
page.release();
doAnalysis(i++);
});
}
function test(){
alert("This message should show");
window.location.href = "http://www.google.com";
alert("This message should NOT show");
}
<href="#" onClick=test()>Click Me</a>
Step through using Firefox(v8): The second message does NOT show.
Step through using chrome (v15, v16): BOTH alerts show.
Chrome blows past the redirect and continues through the rest of the call stack (in this case, it finishes the onClick) before redirecting.
No JavaScript Errors.
All extensions disabled.
I'm using a blank html file with no external files loaded.
Does anyone know of a way to get chrome to execute the window.location change immediately?
Pretty sure the specs give you no guarantees for this one, so I'm not too surprised. The obvious solution would be to throw an exception right after. Assuming you don't have catch blocks littered around your code, that ought to work:
throw "Aborting, redirecting you.";
(Yes, it's ugly. Sorry!)
Edit: fiddles: without throw, with throw
You could add a return
function test(){
alert("This message should show");
window.location.href = "http://www.google.com";
return;
alert("This message should NOT show");
}
There is a better way to do this.
function test(){
alert("This message should show");
return true;
alert("This message should NOT show");
}
<href="http://www.google.com" onClick="return test()">Click Me</a>
Optionally, you can use a confirm to control whether or not this action can be performed on click. Blame Google for trying to mess with functional standards, no other browser forces you to do this.
I was just trying the same thing: redirect using JS. In the PHP script I have, if a certain condition is true, I just end the script with a die function, echoing a script tag with the redirect code:
die("<script type='text/javascript' charset='utf-8'>\n".
"window.location.href='http://'+window.location.hostname+'/newdir/newfile.html';\n".
"</script>\n");
This was not working and I tried to execute the code from the console and it works from there. I assumed it was something about timing, so I added a setTimeout to the redirect:
die("<script type='text/javascript' charset='utf-8'>\n".
"var configURL = 'http://'+window.location.hostname+'/newdir/newfile.html';\n".
"setTimeout('window.location.href = configURL', 500);\n".
"</script>\n");
This patch works for now but I think there should be a better way to do it.