I have dynamically loading iframe in a application.
I'm catching a frame through this code:
Cypress.Commands.add('getIframe', (iframeLocator: string): void => {
cy.wait(10000)
cy.get(iframeLocator)
.its('0.contentDocument').should('not.be.empty')
.its('body').should('be.visible')
.then(cy.wrap)
})
The problem is that - without explicit timeout cy.wait(10000) conditions not.be.empty and be.visible are passing fine, while there is no content of iframe on the page yet.
How to catch iframe without explicit wait ?
An iframe may have "iframe is loading" default, so not.be.empty or be.visible are false checks.
Try content check and make sure <body> query is retried
Cypress.Commands.add('getIframe', (iframeLocator: string): void => {
cy.get(iframeLocator)
.its('0.contentDocument').should('not.be.empty')
.its('body h1').should('contain', 'IFrame title') // retry body
.then(cy.wrap)
})
There are a couple of things that can stop <iframe> code working, including cypress-iframe.
lazy-loading
<iframe src="https://example.com"
loading="lazy"
width="600"
height="400"></iframe>
Standardized lazy-loading of iframes defers offscreen iframes from being loaded until the user scrolls near them. This saves data, speeds up the loading of other parts of the page, and reduces memory usage.
default loading content message e.g "Page is loading", falsely passes the .should('not.be.empty') check
<body> element is changed when proper page is available, negating .its('body').should('be.visible') check
These are the additional steps I use
// when iframe has attribute loading="lazy"
cy.get(iframeLocator).scrollIntoView() // start loading
cy.get(iframeLocator)
.its('0.contentDocument').should('not.be.empty')
.its('body')
.as('body') // alias this command chain
cy.get('#body') // repeats above chain when <body> detached from DOM (replaced)
.should('be.visible')
.should('not.be.empty')
.then(cy.wrap)
.find('div#some-content', {timeout:10000})
You can use the cypress-iframe plugin for this. After installing you can use the frameLoaded method.
// This will verify that the iframe is loaded to any page other than 'about:blank'
cy.frameLoaded()
// This will verify that the iframe is loaded to any url containing the given path part
cy.frameLoaded({ url: 'https://google.com' })
cy.frameLoaded({ url: '/join' })
cy.frameLoaded({ url: '?some=query' })
cy.frameLoaded({ url: '#/hash/path' })
// You can also give it a selector to check that a specific iframe has loaded
cy.frameLoaded('#my-frame')
cy.frameLoaded('#my-frame', { url: '/join' })
Related
Got an issue with safari loading old youtube videos when back button is clicked. I have tried adding onunload="" (mentioned here Preventing cache on back-button in Safari 5) to the body tag but it doesn't work in this case.
Is there any way to prevent safari loading from cache on a certain page?
Your problem is caused by back-forward cache. It is supposed to save complete state of page when user navigates away. When user navigates back with back button page can be loaded from cache very quickly. This is different from normal cache which only caches HTML code.
When page is loaded for bfcache onload event wont be triggered. Instead you can check the persisted property of the onpageshow event. It is set to false on initial page load. When page is loaded from bfcache it is set to true.
Kludgish solution is to force a reload when page is loaded from bfcache.
window.onpageshow = function(event) {
if (event.persisted) {
window.location.reload()
}
};
If you are using jQuery then do:
$(window).bind("pageshow", function(event) {
if (event.originalEvent.persisted) {
window.location.reload()
}
});
All of those answer are a bit of the hack. In modern browsers (safari) only on onpageshow solution work,
window.onpageshow = function (event) {
if (event.persisted) {
window.location.reload();
}
};
but on slow devices sometimes you will see for a split second previous cached view before it will be reloaded. Proper way to deal with this problem is to set properly Cache-Control on the server response to one bellow
'Cache-Control', 'no-cache, max-age=0, must-revalidate, no-store'
Yes the Safari browser does not handle back/foreward button cache the same like Firefox and Chrome does. Specially iframes like vimeo or youtube videos are cached hardly although there is a new iframe.src.
I found three ways to handle this. Choose the best for your case.
Solutions tested on Firefox 53 and Safari 10.1
1. Detect if user is using the back/foreward button, then reload whole page or reload only the cached iframes by replacing the src
if (!!window.performance && window.performance.navigation.type === 2) {
// value 2 means "The page was accessed by navigating into the history"
console.log('Reloading');
//window.location.reload(); // reload whole page
$('iframe').attr('src', function (i, val) { return val; }); // reload only iframes
}
2. reload whole page if page is cached
window.onpageshow = function (event) {
if (event.persisted) {
window.location.reload();
}
};
3. remove the page from history so users can't visit the page again by back/forward buttons
$(function () {
//replace() does not keep the originating page in the session history,
document.location.replace("/Exercises#nocache"); // clear the last entry in the history and redirect to new url
});
You can use an anchor, and watch the value of the document's location href;
Start off with http://acme.co/, append something to the location, like '#b';
So, now your URL is http://acme.co/#b, when a person hits the back button, it goes back to http://acme.co, and the interval check function sees the lack of the hash tag we set, clears the interval, and loads the referring URL with a time-stamp appended to it.
There are some side-effects, but I'll leave you to figure those out ;)
<script>
document.location.hash = "#b";
var referrer = document.referrer;
// setup an interval to watch for the removal of the hash tag
var hashcheck = setInterval(function(){
if(document.location.hash!="#b") {
// clear the interval
clearInterval(hashCheck);
var ticks = new Date().getTime();
// load the referring page with a timestamp at the end to avoid caching
document.location.href.replace(referrer+'?'+ticks);
}
},100);
</script>
This is untested but it should work with minimal tweaking.
The behavior is related to Safari's Back/Forward cache. You can learn about it on the relevant Apple documentation: http://web.archive.org/web/20070612072521/http://developer.apple.com/internet/safari/faq.html#anchor5
Apple's own fix suggestion is to add an empty iframe on your page:
<iframe style="height:0px;width:0px;visibility:hidden" src="about:blank">
this frame prevents back forward cache
</iframe>
(The previous accepted answer seems valid too, just wanted to chip in documentation and another potential fix)
I had the same issue with using 3 different anchor links to the next page. When coming back from the next page and choosing a different anchor the link did not change.
so I had
House 1
View House 2
View House 3
Changed to
House 1
View House 2
View House 3
Also used for safety:
// Javascript
window.onpageshow = function(event) {
if (event.persisted) {
window.location.reload()
}
};
// JQuery
$(window).bind("pageshow", function(event) {
if (event.originalEvent.persisted) {
window.location.reload()
}
});
None of the solutions found online to unload, reload and reload(true) singularily didn't work. Hope this helps someone with the same situation.
First of all insert field in your code:
<input id="reloadValue" type="hidden" name="reloadValue" value="" />
then run jQuery:
jQuery(document).ready(function()
{
var d = new Date();
d = d.getTime();
if (jQuery('#reloadValue').val().length == 0)
{
jQuery('#reloadValue').val(d);
jQuery('body').show();
}
else
{
jQuery('#reloadValue').val('');
location.reload();
}
});
There are many ways to disable the bfcache. The easiest one is to set an 'unload' handler. I think it was a huge mistake to make 'unload' and 'beforeunload' handlers disable the bfcache, but that's what they did (if you want to have one of those handlers and still make the bfcache work, you can remove the beforeunload handler inside the beforeunload handler).
window.addEventListener('unload', function() {})
Read more here:
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/1.5/Using_Firefox_1.5_caching
My app runs inside an iframe in a wrapper page. When the wrapper page loads, the source for the iframe is set like this
<script type="text/javascript">
var frameSrc = 'myApp.jsp';
$(document).ready(function() {
loadFrame(frameSrc);
$("#iFrm").height($(window).height() - 175);
$(window).bind('resize', function(){
$("#iFrm").height($(window).height() - 175);
return false;
});
$("#adminLink").click(function(){
frameSrc = 'myAdmin.jsp';
loadFrame(frameSrc);
});
return false;
});
function loadFrame(src){
$("#iFrm").attr('src', src);
}
</script>
And this loads and runs just fine, but then I've got the admin link on the page that is intended to load a different page into the iframe and it has an event handler inside the document.ready function.
The issue that I'm encountering is that the myAdmin.jsp is loading and then the original document.ready script, in the wrapper page, is running again - completely with the original frameSrc value. It seems as though by changing the iframe source, it's triggering a reload of the entire wrapper page and the original iframe source. Has anyone seen this? Am I missing something obvious?
I got an answer to this question while working through various possible solutions. The problem turned out to have to do with adminLink. The href value was empty, which appears to have directed the browser to reload the current page (the wrapper). When I put javascript: return false; in the href my issue resolved.
<a id="adminLink" href="">Administration</a>
vs
<a id="adminLink" href="javascript:return false;">Administration</a>
I designed a ASP.NET page named kk-container.aspx to be used as a control which will be loaded in Default.aspx with jQuery load function. The page kk-container.aspx has many HTML controls and javascript events bound as in the example.
<!--Sample code from kk-container.aspx-->
<div id="kk-container">
Action
<!--Many HTML controls here-->
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#kk-action").click(function () {
return false;
});
});
//Many javascript here.
</script>
I load this kk-container.aspx into Default.aspx with such code in the Default.aspx.
<div id="mycontainer"></div>
<script type="text/javascript">
$("#mycontainer").load("kk-container.aspx");
</script>
Everything works fine up to here. However, I have to load this kk-container.aspx in a few more divs in the Default.aspx. This causes conflict in the id's of HTML controls. $("#kk-action").click() doesn't work for all. How can I solve this problem and load kk-container.aspx multiple times in one Default.aspx page.
More to say: I considered giving random id's for HTML controls for each load of kk-container.aspx. However I had already designed my stylesheet mostly with id selector. And I use a packet javascript, valums uploader, working in kk-container.aspx. It will also require edit. If there is a simpler way, I don't want to code all over.
I expected too much from jQuery and asked this question desperately. I should have decided first whether I will use "kk-container" thing once or multiple times in a page. For loading "kk-container" thing multiple times, I had to consider these:
Designing CSS using class selectors instead of id selectors.
Producing random id for my HTML elements like in this question.
Writing my javascript functions so that they work compatible with those random id's.
Therefore loadind "kk-container.aspx" in a page with jQuery load wouldn't cause any id conflicts.
Anyway, I did a mistake and didn't want to rewrite my code. I found a solution to load content of "kk-container.aspx" in my Default.aspx page without a problem. Instead of jQuery load function I used iframes.
Since there is already an item with id "kk-action",
Action (like this one)
loading a content having an item with id "kk-action" will cause trouble.
$("#mycontainer").load("kk-container.aspx?id=" + recordID); //troublesome method.
Instead create an iframe without border and load that content into iframe.
function btnEdit_Click(recordID) {
$('#mycontainer').html("");
var kayitKutusuFrame = document.createElement("iframe");
kk-Frame.setAttribute("id", "kk-iframe");
kk-Frame.setAttribute("src", "kk-container.aspx?id=" + recordID);
kk-Frame.setAttribute("class", "kk-iframe"); //For border: none;
kk-Frame.setAttribute("frameBorder", "0");
kk-Frame.setAttribute("hspace", "0");
kk-Frame.setAttribute("onload", "heightAdapter();"); //For non-IE
document.getElementById("Mycontainer").appendChild(kk-Frame);
if (isIE = /*#cc_on!#*/false) { //For IE
setTimeout(function () { heightAdapter() }, 500);
}
}
I didn't gave random id to "kk-iframe" because I will not use it mulitple times. It now resides in FaceBox. To make the iframe flawless, it needs to be auto-resized. My heightAdapter() function will do it. Not only when a content is loaded into iframe but also content changes dynamically because of my clicks.
Here is the actual code for resizing iframe to fit content by Guy Malachi.
function calcHeight(content) {
//find the height of the internal page
var the_height = content.scrollHeight;
//change the height of the iframe
document.getElementById("kk-iframe").height = the_height;
}
Here is my heightAdapter() function which will work both when content is loaded and when I clicked something causing content to expand.
function boyutAyarlayici() {
var content=document.getElementById("kk-Frame").contentWindow.document.body;
calcHeight(content);
if (content.addEventListener) { //Forn non-IE
content.addEventListener('click', function () {
calcHeight(content);
}, false);
}
else if (content.attachEvent) { //For IE
content.attachEvent('onclick', function () {
calcHeight(content);
});
}
}
And the following is a link in a repeater. Since the link will be replicated, it should have unique id by asp server.
<a href="#mycontainer" rel="facebox" id='btnEdit-<%# Eval("ID") %>'
onclick='btnEdit_Click(<%# Eval("ID") %>); return false;'>Düzenle</a>
Now, whenever I click one of the replica links, the content having an item with id "kk-action" can be loaded into the my flawless iframe which will be created in "mycontainer".
<div id="mycontainer" class="kk-iframe" style="display:none"></div>
And the content will be shown in my fancy FaceBox.
You're going to have to use classes to style the elements. There can only be one unique ID per page, so you are going to have to generate different IDs or use class selectors in your JavaScript such as:
$('.kk-action').click()
The above is probably the best way to go as it will give every element with that class the binding
I have this issue. I'm working on a jquery ajaxed site. I have the main content div in the middle and on top the navigation. I need to AJAX the content, because I have flash backgound so that the flash video won't start from beginning after every page load. The only way I was able to do this was with this sort of code:
$(document).ready(function(){
$.ajaxSetup ({
cache: false
});
//For loading
var ajax_load = "<img src='img/load.gif' alt='loading...' /><p>";
// Var
var loadPage1 = "page1.html";
// Load page
$("#page1").click(function(){
$("#content").hide(2000);
$("#content").html(ajax_load).load(loadPage1);
$("#content").show(2000);
});
All other ways to get the div didn't work because there was issues on getting plugins etc. working in the ajaxed div (content).
So... everythig is working fine - but, the div loads it's content from page1.html and shows it and only after this does it hide it and show it. So it loads the page and then does the effects I want to.
Do I need to queue this some how or what's the proper jquery way? I tried delay, stop etc.. but can't seem to solve this out. It's propably very simple.
Thanks.
Show the element in the load callback handler.
i.e:
$("#page1").click(function(){
$("#content").hide();
$("#content").html(ajax_load).load(loadPage1, function(){
$("#content").show(2000)
});
});
.load() takes 2 arguments, the URI and a callback to fire after load.
API is found here: http://api.jquery.com/load/
function() {
$("#content").hide(2000);
$("#content").html(ajax_load).load(loadPage1, function() {
$("#content").show(2000);
});
}
I'm using some jQuery tabs that load their content via ajax. I'm using $(document).ready() in conjunction with the following code:
// Hide loading animation, show content container
$("#content").show();
$("#loading").hide();
The purpose is to wait until the page is fully loaded, then show the content and hide the loading animation.
However, $(document).ready() only waits for the main page to load, not the external ajax content.
Is there something I can do wait until the ajax is loaded too?
Thanks in advance.
Depending on your ajax library, there is usually an option for supplying a callback which is called when the underlying ajax (get post..) operation is complete. You could use that callback to do your initialization rather than within .ready()....
First, if you wish to show animation while you're loading, use ajaxStart and ajaxStop. It does it auto-painlessly. Here's an example:
// Note! This uses jquery-ui to do the dialog...
jQuery(document).ready(function() {
var body = jQuery("body");
body.append('<div id="ajaxBusy"><div style="text-align:center" ><p>Communicating with server...<br \/>Please wait for this operation to finish.<br \/><img src="\/js\/jquery.smallhbar.indicator.gif" \/><\/p><\/div><\/div>');
jQuery('#ajaxBusy').css({
display:"none",
margin:"0px",
width:"260px",
height:"170px",
padding:"5px",
textAlign:'center'
});
jQuery("#ajaxBusy").dialog({
autoOpen: false,
bgiframe: true,
closeOnEscape: false,
//modal: true,
title: 'Shipping Department'});
jQuery(document).ajaxStart(function() {
jQuery('#ajaxBusy').dialog('open');
});
jQuery(document).ajaxStop(function() {
jQuery('#ajaxBusy').dialog('close');
});
});
With this code in my jQuery.ready section, a pretty dialog automatically flashes when ajax operations are occurring.
Finally, if you need to show content afterwards, you need to put your show() method within the success function of your ajax call. If you have multiple ajax calls happening, you'll need to use some variables as flags to signal when everything is done (clunky).
Do you have one or more than one ajax call happening?