Develop Reference

How to select/switch to an iframe

How to select/switch to an Iframe (as the currently targeted document) in Firefox through selenium webdriver. What are the different ways to select an iframe with/ without webdriver.
driver.switchTo.frame("FrameID");

Try this sample example:
WebElement iframeElement = driver.findElement(By.id("IF1"));
//now use the switch command
driver.switchTo().frame(0);
//You can use iFrame name
//driver.switchTo().frame(iframeElement);
//Switch to parent window
driver.switchTo().defaultContent();
driver.quit();
Follow this link to understand more:
http://toolsqa.com/selenium-webdriver/handling-iframes-using-selenium-webdriver/

You can actually select an iFrame using the below methods: -
frame(index)
frame(Name of Frame [or] Id of the frame)
frame(WebElement frameElement)
defaultContent()
So you can switch by passing the any above information about the frame. Yes you need to switch everytime according to require action
Example in c#:-
driver.SwitchTo().Frame("top");
.... Perform your action on frame
driver.SwitchTo().defaultContent();
driver.SwitchTo().Frame("navigation");
.... Perform your action on frame
driver.SwitchTo().defaultContent();
....
Now you have to find the hierarchy of your nested frame and switch all one by one.
use chrome dev tools and select the element you can see the hierarchy .. just switch from parent to child till your element not reach. perform your operation and switch back to default

How to add a GWT module to a dynamically created Iframe

What's the best way to handle this scenario ?
Code wise have I would like to have 2 seperate GWT modules. Modules as defined in this page
Download both modules in a single download, as a js file.
Run one of the modules in a dynamically created iframe.
Detailed description:
I have a GWT module called 'embed' which generates embed.nocache.js file.
I have another GWT module called 'widget' which generates widget.nocache.js file.
I add embed.nocache.js to my HTML page. This adds a link called 'widget' in the HTML page.
On click of this link, an iframe (say, widget.html) opens. widget.html has a link to widget.nocache.js. This file gets downloaded, gets executed in the iframe and puts a horizontal panel into the iframe.
Now I need to eliminate a seperate download of widget.nocache.js file.
Say I inherit 'widget' module in embed, it gets compiled and downloaded together. How do I initialise only the 'widget' related javascript in a dynamically created iframe ?
Can creating a custom linker help ?

Something like this. If you already have an IFrame on your page then just load it into that. The module will run fine so long as it isn't a Cross Site page and belongs to your own domain.
Document doc; // iframe document content
final String url_base = GWT.getHostPageBaseURL();
final Frame frame = new Frame(url_base + url_embedded); // your IFrame
frame.addLoadHandler(new LoadHandler() {
#Override
public void onLoad(LoadEvent event) {
doc = IFrameElement.as(frame.getElement()).getContentDocument();
wrapIFrameContent(); // If you need to wrap any widgets
}
});
frame.setStyleName("css_style_name");
RootPanel.get("content").add(frame);
And that's basically it.
You can embed multiple pages too.
This is just an alternative to Window.Location.assign(url)
Wrap widgets from IFrame pages like this:
Button add_module = Button.wrap(doc.getElementById("addmodule")); // button
Element delem = doc.getElementById(id_events_div); // DIV element
events_div = DivElement.as(delem);
events_list = ListBox.wrap(doc.getElementById(id_event_list)); // ListBox

Closing an iframe after it has reloaded another html page

I have made the following site:
www.ppp.one
Whenever you open an image, a popup is loaded.
This popup can be closed using the X on the top-right. However, if you click on one of the thumbnails in the popup (reloading the frame) the X button can no longer close it.
The JavaScript I use:
function hide(){
if(currentIframe){
currentIframe.hide();
currentIframe = null;
}
popupBG.remove();
popup.remove();
}
And the html:
<a class="small align-top" onclick="frameWarp.hide();">&#10006</a>
Any ideas on what is causing the issue?

When you open the popup you call a function setUpAPI which inserts the frameWrap object into the global scope of the iframe.
When a thumbnail is clicked the frame is reloaded and the frameWrap instance is no longer available.
You could try listening for load events on the iframe instead of ready events:
iframe.ready(function(){
frameCacheDiv.append(iframe);
});
iframe.load(function(){
setUpAPI(iframe, settings);
settings.onShow();
});

It looks like when the iframe's URL changes the frameWarp variable becomes undefined. One idea to try would be to listen to the load event of the iframe and make your changes there: (you'd have to give it the ID of "iframeId")
$('#iframeId').load(function(){
console.log('URL changed');
// code to attach hide event here
});
Another idea would be to change your setup to use the postMessage API for the communication between the parent and iframe. You can read a tutorial of how to do that here:
http://robertnyman.com/html5/postMessage/postMessage.html
Edit: Actually, this blog post is a better example: http://davidwalsh.name/window-iframe

Will Dynamically Loaded Files With The Same Listener Script Load Twice?

Ok. This script works fine, but something tells me this is not a good coding practice. I have a HTML file that contains a script for adding a listener to the in the div class .button-box. This same HTML file loads another HTML file (using .load js) that also has a .button-box div and a script to add a listener to it.
The listener script is just a switch that looks for a data element so there is no conflict (nor will there be) on the code. Basically the first one has 3 cases and the loaded one adds another 3 cases. But in my finished page I have duplicate $(".button-box").on('click', 'a' ...
Is this a coding no no? thoughts?
Edit
$(".button-box").on('click', 'a' ,function() {
switch(this.dataset.button_ref) {
case "download_single_file":
alert("Beep Bop Blop Beep BEEP!... Your File is Downloading");
break;
case "other cases":
other code to execute when button is pressed.
break:
}
}
Above is the switch case code. So I have all my buttons in a .button-box class and as I load the page I pull in sub pages that also have buttons in a .button-box class.

JQuery Mobile do X to every div with given class

I'm building a JQuery mobile site which has an image slider on 2 pages. The sliders are activated using the following JS:
$(function () {
$("#slider").excoloSlider();
});
where '#slider' is the name of the div that gets rendered as the slider.
I have this slider on the 2 pages and have given both the same id, and don't want to insert the above code into both pages. To make things easy I want to be able to make add the above code into a.js file that I'm referencing at the top of both pages.
However, the script only kicks in when one of the pages are the first page to be navigated to. So, I assume this means the code is only being called in the once, and due to the AJAX loading of the subsequent page, it isnt called when this new page loads.
So, how can I run the code to affect any/all pages which feature the slider?

I dont know how many times you have to call .excoloSlider(); function. In case you have to call it each time the page is visited, then you need to use any of these page events, pagecontainershow or pagecontainerbeforeshow.
If you use pagecontainershow, you can run .excoloSlider(); on #slider even if you have the same id in a different page. This way, you specify in which page to look for #slider.
$(document).on("pagecontainershow", function () {
var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");
/* check if #slider is within active page */
var slider = activePage.find("#slider").not(".slider");
if(slider) {
slider.excoloSlider();
}
});
Update
I have added .not(".slider") selector to exclude already rendered slider. The function .excoloSlider() will be called on new sliders only.
Demo

Try to use class instead of id since id is unique, then you can change your jQuery code to:
$(function () {
$(".slider").excoloSlider();
});

Use jQuery Mobile API for the navigation system
$(window).on( "navigate", function( event, data ) {
$("#slider").excoloSlider();
});
Edit
Use pageinit
From the jQM docs:
Important: Use $(document).bind('pageinit'), not $(document).ready()
The first thing you learn in jQuery is to call code inside the
$(document).ready() function so everything will execute as soon as the
DOM is loaded. However, in jQuery Mobile, Ajax is used to load the
contents of each page into the DOM as you navigate, and the DOM ready
handler only executes for the first page. To execute code whenever a
new page is loaded and created, you can bind to the pageinit event.
This event is explained in detail at the bottom of this page.