Error when using YUI3: "Y.QueryString.parse is not a function" - javascript

I'm building a Squarespace page, and I want to have an outgoing link on the page whose query parameters are set according to query parameters on the page itself. Since Squarespace embeds YUI3 in every site automatically, I'm trying to use that (even though I have more experience with jquery).
Example: The page is loaded as http://example.com/page/?email=foo#bar.com. I have a link on the page that goes to http://another.example.com/page which should be modified to go to http://another.example.com/page?address=foo#bar.com.
The following code does exactly what I need when I paste it in the browser console:
var MyButton = Y.all('a[href="http://another.example.com/page"]');
var QueryString = Y.QueryString.parse(window.location.search.substring(1));
MyButton.setAttribute('href','http://another.example.com/page?address=' + QueryString.email);
However, when I put that code in the page source, then when the page loads, the following error appears in the console: Uncaught TypeError: Y.QueryString.parse is not a function
My current theory is that YUI3 loads asynchronously in pieces, and this code runs at a point when Y.all is available but Y.QueryString.parse is not... is that right? What would be the best solution to this?

Yui3 is indeed built around asychonous modules loading, in this case you miss the querystring module.
You need to wrap your code with a Y.use call:
Y.use('querystring', function(Y) {
var MyButton = Y.all('a[href="http://another.example.com/page"]');
var QueryString = Y.QueryString.parse(window.location.search.substring(1));
MyButton.setAttribute('href', 'http://another.example.com/page?address=' + QueryString.email);
});

Related

JQuery script for iframe is not working with Selenium3

I have create a JQuery script that works in the browser console, but it is not working in the selenium3 automation. The exception I'm receiving is unknown error: $ is not defined. I read that the problem is the second argument in the selector. I have tried to escape the $ character but it is not working.
This is the excript I have executed in the browser console:
$('input[type=file]', $('#fonto').contents()).css('display','block')
But when I executed during my test case, is not working. This is the line of code:
((JavascriptExecutor) getDriver()).executeScript("$('input[type=file]',
$('#fonto').contents()).css('display','block')");
I need the second argument because the input is inside an iframe.
This problem occurs in firefox and chrome browsers.
Which is the proper way to execute this script?
EDIT
The JQuery is not loaded. I need to know how to enable the JQuery before execute my script.
Firstly you should switch to iframe.
Than include jquery like this:
browser.SwitchTo().Frame("your_iframe");
var jqueryLoad = "if (typeof(jQuery) == 'undefined')";
jqueryLoad += "{";
jqueryLoad += "var iframeBody = document.getElementsByTagName('body')[0];";
jqueryLoad += "var jQuery = function(selector) { return parent.jQuery(selector, iframeBody); };";
jqueryLoad += "var $ = jQuery;";
jqueryLoad += "}";
IJavaScriptExecutor jsExe = browser as IJavaScriptExecutor;
jsExe.ExecuteScript(jqueryLoad);
jsExe.ExecuteScript("Your jquery code here !");
You can execute your jquery code now. If you have nested iframes you should configure code again.
Finally I have solve the problem, but I have two different approaches:
Follow the point 2 in this link. That means add a new file into your project and it has a very useful example about how to check is it is enable or not. In this case the script should remove the iframe part, because we are already into the iframe. Something like this $('input[type=file]').css('display','block')
The problem was that the iframe hasn't the JQuery active, but the main content, the default frame, has the JQuery active. Then I can change my current frame to the default one, execute the full script with the iframe selector ($('input[type=file]', $('#fonto').contents()).css('display','block')). And after that return to the iframe.
My choice, because I have many projects that execute scripts, I will follow the second one.

Python Selenium - Run javascript that's called on click event to return URL

I have created a script to retrieve text from bet365 using selenium. The goal is to graph the changes through time. I have finished most of the script, but I'm working around the below problem by hand at the moment which is not ideal.
I have a list of elements that I want to get the URL from. the URL's are not in any href tags and they appear to me to be generated by javascript (when each element is clicked).
Because each page is quite heavy and takes time to load I don't want to click on each element, get the URL, then return back to the main page. I would prefer to call the javascript function and hopefully receive the URL back, is this possible?
Unfortunately i have no background in javascript and setting break points or inspecting the timeline is getting pretty overwhelming. So far i have found this function in the chrome debugger which i think is what is creating the URL:
function hrefEvent(n){
n =n || window.event;
var t = n.target || n.srcElement, i = $(t), r;
return t.href
}
Does this look like the piece of javascript i should be calling?
Can i call this script with selenium?
selenium provides execute_script method
driver = webdriver.Firefox()
driver.get("http://bet365/bet365")
driver.execute_script("function hrefEvent(n){n=n||window.event;var t=n.target||n.srcElement,i=$(t),r;return t.href?")

JSP Parsing url and matching key words

Here is my question, I am using jsp script, trying to match a key word in requesting url and do something:
<script>
$url = '${pageContext.request.requestURL}';
if("${fn:contains(url, 'key')}" == true){
...
}
....
But this doest work... I am not sure where the problem is but I want it to be like when url contains this string, go in to the if condition.
Thank you
You are mixing JSP/EL and JavaScript as if they run in sync. This is wrong. JSP/EL runs in webserver and produces HTML code which get executed in webbrowser. JavaScript (JS) is part of the generated HTML code and runs in webbrowser only.
You need to do it either fully in JSP/EL, or fully in JavaScript. You can use JSP/EL to dynamically generate JS code which get later executed when the page arrives at browser. Rightclick page in browser, do View Source to see what JSP/EL has generated. You should not see any line of JSP/EL. You should only see HTML/JS code. It's exactly that JS code which get executed then.
You're using a JSP EL function to test a JS variable which isn't in the variable scope at that moment at all. This is not going to work. It can only test JSP/EL variables.
Here's how you could do it in pure JS:
<script>
var url = window.location.href;
if (url.indexOf('key') > -1) {
// ...
}
</script>
If you really insist in doing it using JSP/EL, you could do as follows:
<script>
var url = '${pageContext.request.requestURI}';
if (${fn:contains(pageContext.request.requestURI, 'key')}) {
// ...
}
</script>
This will then generate the following JS code (rightclick page in browser and View Source to see it):
<script>
var url = '/some/uri';
if (true) {
// ...
}
</script>
But this makes no sense. Whatever functional requirement you need to solve, you need to think twice about the right approach. Feel free to ask a new question about solving the concrete functional requirement the proper way.
If you want a parameter that the page was requested with, use ${param.paramName}. So in this case ${param.key}. See implicit objects in the docs. And if you just want to check it has a value try ${not empty param.key}.

Call JavaScript function on a page automatically with Chrome?

When I load a particular webpage, I'd like to call a Javascript function that exists within their page. I could use a bookmarklet with javascript:TheFunction();, but I'd like to know if there's an easier way to do it, either with a Chrome extension or otherwise.
With chrome, you can either install a grease monkey script directly or get the Blank Canvas script handler plugin (the latter of which I use).
Chrome extensions run in a sandbox so you cannot call a function directly from the webpage code how you want. you either have to use javascript:fuction(); and set document.location, or you can create script elements on the page with a callback to your own extension. check out how this guy did it:
https://convore.com/kynetx/kbx-writing-durable-code/
i am refering to this post, and the one above and below it specifically
var anewscript = document.createElement("script");
anewscript.type = 'text/javascript';
anewscript.innerHTML=' callback_tmp= function (mydata){ ' +
' document.getElementById("someElement").onclick(mydata);' +
'}';
document.getElementsByTagName("head")[0].appendChild(anewscript);
An alternative option is to modify the javascript function to make it globally accessible from the [Chrome] debug console.
Change the function from for example
function foo(data)
to
foo = function(data)
then using the debug console, call the method with the attributes required
data = {my: "data"}
foo(data)

How to code firefox extension which run javascript code in the page's context like firebug does

I know that for safety reasons that this is not easy to achieve, however there would be a way to do so as firebug does...
Please help, would like to invoke some script in the page's context to achieve some effect...
Basically, I would like to achieve two functionality:
1. add jQuery to any web page automatically if not already exist.
2. when open certain address, call a method of that page to auto notify the server. (an ajax functionality of the page)
I have tried to inject on the body, no luck.
tried to get the window object, which however do not have access to call the function.
Will try to change the location to something like: javascript:alert('test inject');
Many thx.
OK, after reading some official documentation and the GreaseMonkey's source, I get the following method which basically works for me.
Hope it will save sb's hour:
var appcontent = document.getElementById("appcontent"); // browser
if (appcontent) {
appcontent.addEventListener("DOMContentLoaded", function (evnt) {
var doc = evnt.originalTarget;
var win = doc.defaultView;
var unsafeWin = win.wrappedJSObject;
// vote.up is the function on the page's context
// which is take from this site as example
unsafeWin.vote.up(...);
}, true);
}
}
Greasemonkey does that. If you are developing your own extension with similar functionality, you can use Components.utils.evalInSandbox.

Categories