I have a page with 2 iframes, 1 nav frame, 1 content frame. I want to load a link from the nav from into the content on mouse over. Essentially the same behavior as clicking a link with target="f" but without having to click.
This onmouseover="window.location=event.target.href" works to autoload a link in general but I want it to do it in the iframe I specify.
Code for link in the nav frame.
<a target="f" href="pfh.html" onmouseover="window.location=event.target.href">pfh</a>
on click it goes to target frame f but the onmouseover event it loads in the current frame.
I had searched along time here before posting but I did some experimenting & got it to work with help from this page Target a Window or Frame Using JavaScript or HTML
onmouseover="top.frames['f'].location=event.target.href"
Related
I am working with a couple web applications, and one of them does not show the "spinning circle" status indicator in Internet Explorer when posting back a form. When navigating from one page to another, the indicator works; it always seems to work on the second application.
It took me awhile to figure out the difference, but it is because the first application uses frames. Navigating from page-to-page reloads the entire frameset, but a postback to any given webform only loads that frame. In this instance, IE 11 does not provide any status indicator. This is a problem on one specific form that does significant server-side processing--from a user perspective, you cannot tell that the form was even submitted.
Is there any way to force IE to show the status indicator in this scenario? Alternately, I can use Javascript on submission to show some "Please wait..." type message. I'd like to avoid that, as it is inconsistent with the rest of the application. Thanks!
Here is a simple jsFiddle showing a simple iframe of CNN. Notice that if you click links within that iframe, IE11 will show no status indicator that lets you know it is loading (normally the spinning circle on the tab).
https://jsfiddle.net/huokzjad/1/
Code:
<body>
<iframe src="http://cnn.com/" style="width: 90%; height: 300px;"></iframe>
</body>
Note that Firefox shows the loading status indicator properly.
Already posted this as a possible option in the question, but will include as my own answer:
As a workaround, you could have a hidden div with a "loading" type message. Upon submission, show the div using Javascript.
I am trying to automate a scenario where I would need to access elements inside an iFrame and continue my testing.
My current problem is that, I am able to switch to the iframe successfully, but I am unable to access contents inside the frame.
The contents inside the iframe are Shadow DOM contents and are inside a document.
The HTML code looks like this::(Please see attachedHTML)
I have tried the below and get
org.openqa.selenium.NoSuchElementException: no such element: Unable to locate element
By accessing the shadow root
driver.switchTo().frame("iframe_id");
WebElement root1 = driver.findElement(By.className("class_abs"));
WebElement shadowRoot1 = expandRootElement(root1);
Here webdriver is unable to find element by classname.
2.By using Javascript executor
driver.switchTo().frame("iframe_id");
JavascriptExecutor js=(JavascriptExecutor) driver;
js.executeScript("arguments[0].click();", driver.findElement(By.xpath("button_xpath")));
Here webdriver is unable to access the Xpath.
3.
Using normal Xpath after switching to IFrame.
I would like to know if I need to access the contents of the document inside iFrame first to access its elements. If that is the case, how can I do it.
P.S- Tried this on both chrome and Firefox browser.
All,
I have finally managed to resolve the issue.
So the issue resolutions goes like this.
-The frame designed on the page were actually hidden.
-I had to switch to the hidden frame after switching to the main frame.
-Then the elements were then identified easily.
Problems what I faced:
1. In Firefox browser-The hidden frame was not detected in the 'Firefinder' when I checked with filter 'frame' which was detecting all the frames except the hidden frame. Same was the case with 'Firepath'
2. In Chrome browser- Though the document inside the main frame was displayed, traversing inside did not show the hidden iframe.
Solution:
In Firefox browser, inspecting the element using the HTML tab helped me to identify the hidden frame inside the main frame.
Carefully traversing the iframe hidden document helped me.
But, I am still not sure why the Chrome browser 'Inspect' doesn't show this frame.
I have three iframes in my application, and in one frame I have a div (suppose a menu) which toggles between hide and show on click of a particular icon. now what I want to do is to make it hide when I click anywhere in any one of the other frames. Any help with example.
I am using almost 2000 Link Buttons on a webpage.When i click any of the link buttons,it should direct me to next page and the TEXT of that link button should be stored in some session variable which can be used wherever i want.I am able to do so but the problem is i have to do it for all the 2000 click events.Is there a way i can do it without writing so much of the code? I have almost no knowledge of javascript and jquery.
I have a page which contains an iframe. The iframe can take user's input (via button click or menu selection) and display content accordingly.
What I need is, when a user manipulates the iframe, the browser push each set of iframe parameters into history; and when the user click at back button, the iframe will reload its content using the saved parameters from the previous history entry. I have a piece of code doing the reloading as shown below.
The strange thing is, when I make multiple settings on the iframe (hence multiple state entries added to history), and then click at back, it'll work like this,
Say that I have state 4, 3, 2 in history and I'm now at state 5
the first click restore to state 4 (the "----state changed----" logging message is printed
the second click reloads the iframe with default content. The "----state changed----" is not printed; the reloading code is not called.
the third click restore to state 3
the fourth click is like the 2nd click
the 5th click restore to state 2
So after each click that successfully restore the state, it takes two clicks to trigger the popstate event (I tried statechanged event, too, with same result) and restore to another previous state.
Anyone know what's going on here? Thanks in advance.
History.Adapter.bind(window, "popstate",
function (event) {
console.log("----state changed------", History.getState());
console.log("----state data------",History.getState().data.state);
//code to do reload an iframe to its proper state
});
So I stumbled on this same issue. The situation we had was using history.pushState() to update the URL and then after that changing the src attribute of an <iframe>. By changing the src of the <iframe>, we are implicitly telling the browser to add to its history that the iframe had changed. Thus...
When we pressed back the first time, window.history's popstate is
triggered on the <iframe>'s src attribute and is reverted back to it's previous state.
Pressing back a second time triggers the popstate event for the state you originally pushed onto the stack
Our solution involved that when we decided to update the URL and push the state onto the stack, when we wanted to update the <iframe>, we used jQuery to replace the <iframe> list so...
$("#iFrameID").replaceWith(('<iframe id="iFrameID" src="' + location + '"></iframe>'
By doing this, we removed the side effect of the browser history getting polluted with our update to the <iframe> tag.
I had the same problem.Instead of navigating the user to the previous page on the website, the back button navigated the user to the previous page inside the iframe. This code below will help you to solve your problem:
iframe.contentWindow.location.replace(href)