I'm using Javascript to open a page in a different frame using onclick. I had this working when last tested, but was made aware yesterday that it no longer works in Chrome. I retested the other browsers and its still working as expected. I know Chrome can be a little finicky when it comes to Javascript, I'm just not sure how to resolved.
<asp:HyperLink ID="downloadReport" runat="server">
<img src="images/save.jpg" onclick="javascript:top.frames['main'].location = 'DownloadReport.aspx?<%= url %>';return true;" />
</asp:HyperLink>
What do I need to do to resolve the issue in Chrome? And please refrain from a discussion on why frames are or aren't a good idea. While in most cases things can be accomplished in different ways, there are some specific uses for them still.
Problem solved. I was thinking that Chrome needed to access frames by id where as others could use name or id, that was apparently incorrect. Chrome required the frame name. So on my frameset page I added a name attribute in addition to the id one and everything is working again as needed.
<frameset rows="100,*" border="0">
<frame name="top" id="top" runat="server" />
<frame name="main" id="main" runat="server" />
</frameset>
If you really need to use hyperlink in this scenario, prevent its default behavior by doing return false; instead of return true;
But if you don't need it - just use the image without hyperlink (adding styling for cursor if needed):
<img src="images/save.jpg" onclick="top.frames['main'].location = 'DownloadReport.aspx?<%= url %>'" style="cursor:pointer" />
Related
Can't click on the anchor inside a frame with href value as javascript using selenium.
#Note: I could manually click/ call the javascript from IE developer console all looks good. The issue is only through selenium .
Here is the page source like
<html>
<body>
<p>
<iframe name="iframe1" width="100" height="218" src="about:blank" frameborder="0" marginwidth="0" "marginheight="0" scrolling="yes">
<html>
<body>
<div class="className" id="DivName"onmouseover="startLinkHover(0,70)" onmouseout="stopLinkHover()">
<a name="link0" href="javascript:function()" shape=""> This is link 1 </a>
</div>
</body>
</html>
</iframe>
</p>
</body>
</html>
I am working with c# ,IE and selenium
Selenium.WebDriver.IEDriver" version="2.53.1.1"
Selenium.WebDriver" version="3.0.0"
Selenium.Support" version="3.0.0"
IE 11 ( As my web application only support IE)
Here is what i have tried:
As it the page is consisting of iframe
1) I am switching to iframe and find the anchor using the name and click
driver.SwitchTo().Frame(driver.FindElement(By.Name("iframe1"));
driver.FindElement(By.XPath("//a[#name='link0']")).click();
2) I have also tried to extract the href property into a string variable and tried to execute the javascript using Javascript executor.
driver.SwitchTo().Frame(driver.FindElement(By.Name("iframe1"));
var js=driver.FindElement(By.XPath("//a[#name='link0']")).GetAttribute("href");
var jsDriver = (IJavaScriptExecutor)driver;
jsDriver.ExecuteScript(js);
Please excuse if any typos as i don't want to post the html source here i have explained my issue with a sample.
Thank you
Finally i managed to resolve this issue by reloading the project from source control after pointing the .net framework target version to 4.5 instead of 4.52 (not sure why would this be?).
after investigations , it was proved that issue was not with selenium clicking on the element but the execution of java script after that with page loads.
For some weird reason, iFrame is not showing the right content when updated by JavaScript. It is the very same link, but with different results
https://jsfiddle.net/omarjuvera/qvbpcy9k/1/
HTML
Desired result
<br/>
<iframe src="//ws-na.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&OneJS=1&Operation=GetAdHtml&MarketPlace=US&source=ac&ref=tf_til&ad_type=product_link&tracking_id=ow-20&marketplace=amazon®ion=US&placement=B004BCXAM8&asins=B004BCXAM8&linkId=SK5UG2J5CK4WNOKE&show_border=true&link_opens_in_new_window=true"></iframe>
<br/><br/>
JavaScript update
<br/>
<iframe id=link src=""></iframe>
JS
document.getElementById("link").src = '//ws-na.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&OneJS=1&Operation=GetAdHtml&MarketPlace=US&source=ac&ref=tf_til&ad_type=product_link&tracking_id=ow-20&marketplace=amazon®ion=US&placement=B004BCXAM8&asins=B004BCXAM8&linkId=SK5UG2J5CK4WNOKE&show_border=true&link_opens_in_new_window=true';
For some reason your ampersands are & amp; just make them &. It seems like the static code fixed the problem for you internally but the javascript did not.
document.getElementById("link").src =
'//ws-na.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&OneJS=1&Operation=GetAdHtml&MarketPlace=US&source=ac&ref=tf_til&ad_type=product_link&tracking_id=ow-20&marketplace=amazon®ion=US&placement=B004BCXAM8&asins=B004BCXAM8&linkId=SK5UG2J5CK4WNOKE&show_border=true&link_opens_in_new_window=true'
I have the following piece of Javascript:
//Clear out container
var container = document.getElementById("buy");
while (container.lastChild)
{
container.removeChild(container.lastChild);
}
and further down, the piece of HTML on which it operates:
<div id="buy" class="itemGroup" />
<canvas id="drawArea" width="200" height="200">
Your browser does not support HTML5 Canvas.
</canvas>
However, the Javascript code removes the canvas, unless the buy div uses start and end tags i.e.
<div id="buy" class="itemGroup">
</div>
Why is this? I thought the two, from an XML point of view, are equivalent? Using Chrome 29.0.1547.76 m on Windows 7.
Thanks in advance!
This is not a more complete answer than the comments already given per se, but I just can't add a comment to your post. Anyway, there are some tags which are not self closing and 'div' is one of them - which actually makes sense if you think about it. Semantically speaking, why are you making a 'division' if there's nothing in it?
Another tricky one is 'script'. Even if you are linking to an external script file in your page, you cannot use
<script type="text/javascript" src="example.js" />
this just doesn't work. Another one is 'textarea'. This renders any html after it useless!
<textarea cols="5" rows="5" />
Take a look at some other ones: http://xahlee.info/js/html5_non-closing_tag.html
I have two separate .aspx files that are used in one web page. One for the header and the other for the body. In the javascript for the body file, how would I grab the value of an asp:label control from the header? It's name is "lblName", so I tried simply document.getElementById("lblName").value and I received the error:
Microsoft JScript runtime error: Object required
This site is written in Visual Basic, so I'm wondering if anyone knows how to do this from the code behind as well.
If I hit F12 in the browser (IE) this is the hierarchy I see:
<head>
<frameset rows="147,*" frameBorder="no" frameSpacing="0">
<frame name="frHeader" id="frHeader" src="DistHeader.aspx?statProducer=0707090003" noResize="noresize" scrolling="auto">
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
<html>
<head>
<body topMargin="1" rightMargin="0" bottomMargin="0">
<div class="clsNoPrint">
<div class="clsNoPrint">
<table width="100%">
<tbody>
<tr class="clsNameBar" width="100%">
<td width="*" align="left">
<span class="clsNameBar" id="lblName" style="width: 100%;">
If you have runat="server" on your label than its id in browser will be different from one you see on server.
You must pass its ClinetID to JS somehow. For instance, with Page.RegisterStartupScript or if your JS is a part of aspx file you can do something like this:
document.getElementById('<%=lblName.ClientID %>')
Another problem: I guess lblName is <asp:Lable /> which is converted to span which has no .value, but you can use something like this:
document.getElementById('<%=lblName.ClientID %>').innerHTML
As you are using frames - depending on where your code is located you need to access frame first:
//Chrome, FF
document.getElementById("frHeader").contentDocument.getElementById("lblName")
//IE (it does not support contentDocument and have document instead)
document.getElementById("frHeader").document.getElementById("lblName")
Suppose your code is in outer document, which contains actually contains a frame. But if it is in another frame - you should add window.parent. before document.getElementById
Since this was a website that was created almost ten years ago, we had to go up the ladder in the frameset to get the value we were looking for. The code below was the method used
var el = parent.parent.frames("frHeader").document.getElementById("lblName").innerText;
I'm new here and like to know how to refresh 2 different iframes on one page.
I found something on google using getElemenById. But it has to work in firefox and firefox has some problems with Id's.
thanks in advance.
<form action="managecartform.html" onclick="deleteAllCookies();"><button type="submit" >Empty cart</button></form>
What does your form have to do with iframes?
Do you mean this? Load the managecartform into one frame and reload the other?
<form action="managecartform.html" target="iframe1"
onsubmit="deleteAllCookies(); window.frames[0].location.reload(1);">
<input type="submit" value="Empty cart"/>
</form>
<iframe name="iframe0"></iframe>
<iframe name="iframe1"></iframe>
firefox doesn't have problems with ids -- 99% of the time it's because you've either got a missing id or you've duplicated an id.
ids must be unique throughout the entire document.
to answer your question though:
<iframe id="frame1"></iframe>
<iframe id="frame2"></iframe>
<input type="button" onclick="refreshFrames()" value="refresh frames" />
<script type="text/javascript">
function refreshFrames(){
frame1 = document.getElementById('frame1');
frame2 = document.getElementById('frame2');
if(frame1.contentDocument){
frame1.contentDocument.location.reload(true);
frame2.contentDocument.location.reload(true);
} else {
frame1.contentWindow.location.reload(true);
frame2.contentWindow.location.reload(true);
}
}
</script>
(For IE, you might have to use contentWindow instead of contentDocument depending on the version of IE you're trying to support)