Is is possible to refresh only once iframe parent page when iframe contain specified div id ?
I tried this on parent page but didn't work :
if document.frames('myiframe').(document.getElementById("iframedivID") !== null) { window.location.href = "mysite.com"; }
It is taking time to load the inner document. So we have to wait till inner document gets loaded and once it is loaded, the inner div can be accessed. Here is my example HTML and javascript code. Due to this, for the first time, you may get null in the alert. Hope this helps.
Test.html
<iframe id="iframedivID" src="Test1.html"></iframe>
Test1.html
<div id='myDiv'>My name is ravindra</div>
<script type="text/javascript">
if (window.parent.window.location.href.toString().indexOf("?refresh") == -1){
window.parent.window.location.href="Test.html?refresh";
}
</script>
Related
Using Protractor for nonAngular page I am facing a problem with modal element location from an iframe, which is nested in another iframe. I'm trying to locate the element and I always get Element not found error.
Page source:
<iframe ...
...
<iframe frameborder="0" ...
<html
<head
<body
<div id="viewport" style= ...
<div id="modal" class=" unit ...
Page object:
this.layout = element(by.css('div[data-field="device"]'));
this.firstIframe = this.layout.element(by.tagName('iframe'));
this.content = element(by.tagName('body.desktop'));
this.secondIframe = element.all(by.tagName('iframe')).last();
this.modalUnit = element(by.id('modal'));
Spec:
...
// waiting for first iframe to be visible
browser.wait(EC.visibilityOf(page.firstIframe),10000).then(function() {
// switch to first iframe
browser.driver.switchTo().frame(page.firstIframe.getWebElement());
// verify content is displayed
expect(page.content.isDisplayed()).toBeTruthy();
// switch to default content
browser.switchTo().defaultContent();
});
// waiting for second iframe to be visible
browser.wait(EC.visibilityOf(page.secondIframe),10000).then(function() {
// switch to second iframe
browser.driver.switchTo().frame(page.secondIframe.getWebElement());
// waiting for modal to be visible
browser.wait(EC.visibilityOf(page.modalUnit),10000).then(function() {
...
Content element is found in the first iframe without a problem. But modalUnit element from the second iframe is not found, whereas second iframe is found. Any idea why?
Heureka!!! Found simple solution to my problem (https://groups.google.com/forum/#!topic/selenium-users/OkcX2vaZoek):
...
// waiting for first iframe to be visible
browser.wait(EC.visibilityOf(page.firstIframe),10000).then(function() {
// switch to first iframe
browser.driver.switchTo().frame(page.firstIframe.getWebElement());
// verify content is displayed
expect(page.content.isDisplayed()).toBeTruthy();
});
// waiting for second iframe to be visible
browser.wait(EC.visibilityOf(page.secondIframe),10000).then(function() {
// switch to second iframe
browser.driver.switchTo().frame(page.secondIframe.getWebElement());
// waiting for modal to be visible
browser.wait(EC.visibilityOf(page.modalUnit),10000).then(function() {
...
I had to remove browser.switchTo().defaultContent(); before I switch to second iframe and all troubles were gone.
This works …
Link text
but this doesn't …
<script type="text/javascript">
window.onload = function() {
var a = document.getElementById("mylink");
a.onclick = function() {
parent.document.getElementById('frameName').src = 'page.html';
}
}
</script>
<a id="mylink" href="page.html">LINK</a>
Any idea why I can't get the element by id from one iFrame to another? Also I know very little code so I apologize in advance if its obvious.
First i would make sure that the security of the site within the IFrame allows you to do this kind of stuff. Check out this link:
Overcoming "Display forbidden by X-Frame-Options"
Next, i would worry about the target of your anchor tag. With specifying it will default to self. In your second piece of code the target will be _self. Thus, when you click the link your javascript will want to change the source of the IFrame while the link will want to change the entire page. I would pick either a JS or HTML implemetation of linking and not both. Here is something that i put together to show one way of changing the iFrame without an actual anchor tag.
<html>
<body>
<iframe id="frameName" src="page.html"></iframe>
<button onclick="changeFrame()">LINK</button>
<script>
function changeFrame() {
document.getElementById('frameName').src ='page2.html';
}
</script>
</body>
</html>
I have some keyboard shortcuts binded to the document object using the keydown event (I am using the jquery.hotkeys plugin to do this, but I doubt this matters).
I then have an iframe which I insert dynamically into the DOM and after some actions remove it. My problem is that after removing the iframe, I need to click back on the parent document in order to be able to use the keyboard shortcuts, otherwise the keydown events are not detected.
I have tried using .focus(), .click(), .mousedown() etc on the document element as well as on other elements on the parent page, but I could not get the focus back to the parent page.
How can I get the focus back to the page without requiring the user to click on the page?
Thanks!!
if you have an iframe that is contained in the document you can store the "main" document as a variable prior to creating the iframe.
Then when you remove the iframe just call top.doc.focus() or top.doc.getElement('id').focus().
I just spent a while struggling with a similar issue, and what I've concluded is that the script running in the child frame keeps stealing focus back to that frame. Then when the script terminates, the child frame has already been removed, so the browser doesn't know where to focus anymore.
How I solved this was to create a function in the parent (or top) frame, that first removes the child frame, and then restores focus to itself. Now, from the child frame, I simply call the parent's function, and that fixes it.
Example:
outer.html:
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /></head><body>
Outer content - press [Enter] to load the iframe
<div id="iframeHolder"></div>
<script src="//ajax.googleapis.com/ajax/libs/prototype/1.7.2.0/prototype.js"></script>
<script>
// Create a function for the child frame to call
function regainFocus(){
$('iframeHolder').update('');
window.focus();
}
// When the outer document loads, start handling keystrokes
Event.observe(window, 'load', function(){ Event.observe(window, 'keyup', function(e){
// Catch only the Enter key
if((e.which||window.event.keyCode) != Event.KEY_RETURN) return;
// Construct the iframe, set its src, add it to holder, and focus on it
var frame = $(document.createElement('iframe'));
frame.setAttribute('src', 'inner.html');
frame.observe('load', function(){ this.contentWindow.focus(); });
$('iframeHolder').appendChild(frame);
});});
</script>
</body></html>
inner.html:
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /></head><body>
Inner content - press [Esc] to close the iframe
<script src="//ajax.googleapis.com/ajax/libs/prototype/1.7.2.0/prototype.js"></script>
<script>
// When the inner document loads, start handling keystrokes
Event.observe(window, 'load', function(){ Event.observe(window, 'keyup', function(e){
// Catch only the Esc key
if((e.which||window.event.keyCode) != Event.KEY_ESC) return;
// Call the parent's function
parent.regainFocus();
});});
</script>
</body></html>
Suppose we have the following HTML file:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test iframe download</title>
<script type="text/javascript">
var init = 0;
function download() {
document.getElementById("dload_frame").src = "http://example.com/dload.py";
}
function alert() {
if (init == 0) {
init = 1;
}
else {
document.getElementById("alert_span").innerHTML = "Got it!";
}
}
</script>
</head>
<body>
<span id="alert_span">Main content.</span><br/>
<input type="button" value="Download" id="btn" onclick="download()" />
<iframe id="dload_frame" src="http://404.com/404" onload="alert()"> </iframe>
</body>
</html>
Now, if the URL to which iframe's src is being rewritten to (in this case - "http://example.com/dload.py") returns HTML, no problem: the onload event fires, the span's contents are replaced, everybody's happy.
However, if the content type of the file returned by the URL is set to something that forces the browser to open the save file dialog, the iframe's onload event never fires.
Is there any workaround? Using iframes isn't necessary, the desired behavior is to launch a callback after the browser begins downloading the supplied file.
I have encountered the same problem as this:
Here is my work-around, please see if it works for you:
<script>
function download(){
var url = 'http://example.com/dload.py';
var htm = '<iframe src="' + url +'" onload="downloadComplete()"></iframe>';
document.getElementById('frameDiv').innerHTML = htm;
}
</script>
<div style="display:none" id="frameDiv">
</div>
<button onclick="download()">download file</button>
As far as I can remembered iframe's onload event fires only once.
Setting another value for src attribute will not cause the onload event to fire again.
I have the same problem, onLoad handler is only fire when the content change. If you download a file. If you delete HTTP header to print file content on iframe, the onload is correctly fire.
My solution after many different approaches to get this working across ff ie safari and chrome was not have a 2 step download.
the original JS request to create an iframe loads a src that would normally have loaded the pdf
However, the src now loads a page with yet another iframe inside of it, which now contains the url of the pdf.
in the html response I trigger the onload and also a catchall setTimeout funciton which calls my response on window.parent.window.handlerfunction which my onload on the top iframe would have been. The result is a PDF download and a trigger on the top level parent of the handler function that works across the browsers since it no longer relies on detecting an actual iframe load but rather relies on supported parent/child window relationships.
hope this helps someone who was also stuck
You can check iframe readyState property repeatedly after short time intervals until it gets completed.
function iframe_onload(iframe_id, js) {
var iframe = document.getElementById(iframe_id);
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
if (iframeDoc.readyState == 'complete') {
eval(js)
return;
}
window.setTimeout('iframe_onload("' + iframe_id + '",`' + js + '`);', 100);
}
You might need help of jquery for this, for instance you can do this:
$.get('http://example.com/dload.py',{},function(result){
$('alert_span').html(result);//or some content
});
I want to show a loading image before the content of the whole page is loaded. How to achieve this? I'm working in ASP.NET.
Thank you.
NLV
You would need to use Javascript to accomplish this. My preference is jQuery. jQuery has a function that executes when the page is fully loaded, so you could set your main content div to have a css property display:none, and then when the DOM is ready, you could use jQuery to show the content:
$(document).ready(function() {
$("#myContent").css("display", "block");
});
You should initially have the image showing in your HTML, and then hide it when the page loads, like this:
Javascript:
window.onload = function() {
document.getElementById('loadingImageIDHere').style.display = 'none';
};
EDIT: The OP tagged this question as 'javascript', NOT 'jquery'!!
My personal preference is to have a loading image displayed on every page in advance and then use jQuery to hide the image once the page has loaded. It's up to you whether you want to use $(document).ready or $(window).load.
// assumes you already have a DIV#preloader container on your page centered with a loading image inside
// of it
$(document).ready(function() {
$("#preloader").hide();
});
$(window).load(function() {
$("#preloader").hide();
});