I am developing an chat application with KO. While binding the chat conversation, the browser is hanging till binding and the favicon, browser Refresh and cursor buttons are blinking for every message binding.
I've tried like making visible false by default and making visible after binding. But it didn't worked for me.
Here is the KO code for binding the messages
ko.utils.arrayForEach(data, function (item) {
var msgobj = new ViewMessagesObject();
msgobj.Chattype(item.Chattype);
msgobj.contactname(item.contactname);
msgobj.contactnum(item.contactnum);
msgobj.contactpic(item.contactpic);
msgobj.deliverydate(item.deliverydate);
msgobj.file(item.file);
msgobj.frompic(item.frompic);
msgobj.is_delivered(item.is_delivered);
msgobj.is_read(item.is_read);
msgobj.loader(item.loader);
msgobj.message(item.message);
msgobj.messageid(item.messageid);
msgobj.messgetype(item.messgetype);
msgobj.Pic(item.Pic);
msgobj.readdate(item.readdate);
msgobj.sentdate(item.sentdate);
msgobj.sentstatus(item.sentstatus);
msgobj.toname(item.toname);
msgobj.topic(item.topic);
msgobj.uploadopacity(item.uploadopacity);
self.DisplayMessageCollection.push(msgobj);
}
How can I stop these flickering issue while binding.
I've attached a video that shows the flicker of favicon and refresh button, so that you can understand my problem clearly.
Thanks in Advance..
Video Demonstrating My Problem
The video you have posted shows the reload button next to the address bar in chrome spinning and the favicon flickering.
The symptoms you describe happen when changing window.location in some way.
This happens when:
navigating to a url
an iframe is injected into the DOM
the src attribute of an iframe changes
certain properties on window.location object change
This is by no means an exhaustive list of what can cause the refresh button to spin in the chrome browser but the code in your answer is not the cause; this is not a knockout related issue at all.
Some possible causes to this issue:
You have some code not posted in your original question that does stuff with iframes. Is your chat application possibly using the forever frame technique?
You have a chrome plugin that uses iframes
I hope this points you in the right direction to solve the issue.
Related
I use a userscript to modify the client-side code of a website. This code is adding an anchor tag to the page. Its target is _blank. The thing is that if I click this link too frequently, the site errors. A simple refresh on the new tab fixes the problem.
When I click on the link and it instantly opens a new tab. But I don't want that new tab to render until I visit it, or with some sort of time delay. Is there a way of achieving this?
I am using Firefox, so Firefox-only solutions are fine. I found this, but I don't see a way of using it to prevent the tab from rendering in the first place. When I Google for this, I see results about add-ons that can solve the problem. But, the links to them always 404. Ideally, the solution would only affect the tabs created by this script instead of the way all tabs work, but if the only way to do it is to affect the way all tabs work, I'd accept that as a solution.
The Tampermonkey documentation says there is a GM_openInTab function. It has a parameter called loadInBackground, but it only decides if the new tab is focused when you click the link.
If there is a way of making this new tab render some HTML of my choosing, I think that would be a neat solution. i.e., I'd write some HTML that, on focus, goes to the actual website's page. If this is an option, I'd need to know how to open a tab to HTML of my choosing in grease monkey.
(Just realization of idea you told in your question yourself)
You can place simple page that waits for focus and then redirects to what you pass in URL parameter somewhere and open in background tabs. Like:
load-url-from-search-on-focus.html?http://example.com:
<!doctype html>
<body
onload="document.title=u=location.search.slice(1)"
onfocus="u?document.location.replace(u):document.write('?search missing')">
Try it.
(data:uri could have been used instead of hosted page, if there weren't those pesky security precautions blocking rendering of top-level datauri navigations :|)
I have a simple "360 Tours" page on a client's Opencart website, using an iFrame on an info page. The page opens with an outside view, the visitor can then select other areas to view by clicking links below. The viewer code pannellum.htm and all the panoramic images are hosted on the client's server with the viewer displayed in an iFrame based on Pannellum's examples.
This was trivial to get working and has operated correctly for months but recently stopped working, displaying nothing where the panoramas once were. I tried Chrome, Firefox & Safari under OSX, Windows and an iPad without Joy. However, this morning I noted that my Chromebook still worked perfectly. So, I updated the Chromebook and it too stopped working. Nothing at my end has changed, though I did update to the latest pannellum.htm today to no avail.
A JS function load360() forms a url and loads this into the .src property of the iFrame which is located by id. Originally, the working code looked like this:
let url=...
let frame=document.getElementById("mf-360");
frame.src=url;
frame.contentWindow.location.reload(true);
Searching reveals that the reload is not required and simply assigning a new url to the .src property should be enough to force a refresh of the iFrame. Removing the reload had no effect, and in fact having it there stops the viewer from ever displaying. However, assigning a blank string to .src then the required url like this..
let url=...
let frame=document.getElementById("mf-360");
frame.src='';
frame.src=url;
..seems to work, but only every _second) time load360 is called.
Does anyone have any idea what's going on?? I'm more of an electronics-design/embedded guy and any help here would be most appreciated..
The site is https://www.davidcoils.com - click '360 Tours' at the top.
I have an HTML form that contains regular inputs as well as a file input. When a user selects one or more files to upload, I instantly change the target attribute of the form to the name attribute of a hidden iframe on the page as well as change the action attribute of the form to the script that I want to send the file-upload request to.
From the requested script, I then upload the files to the server, and once the script ends, the onload event for the iframe fires, after which I make various interface changes.
Everything uploads correctly, but the problem is that the iframe request seems to cause a page request to be added to the browser history, which creates unintended consequences. I have currently found the following two issues:
If I upload one file and then right after that another file, and then
hit the Back button, the browser stays on the form instead of going
back to the page displayed before the form.
If I upload one file and then hit the
Back button, the browser corrects goes back to the previous page,
but if I then hit the Forward button to go back to the form, for
whatever reason, the script that is executed in the iframe to upload the files is immediately called upon the form loading, which causes other unintended side effects.
Point being, it seems like the iframe request being added to the browser history is causing all sorts of problems, and I'd like to avoid this if possible. Is there any way to stop this all from happening?
I should also note that I'm currently only developing in the most recent version of Chrome, but whatever solution I use must work back to IE8.
Below are some explaining refer to your bug
Rerendering components with iframe leads to browser history duplicates
The navigation events of the iframe (change its src attribute in this case) are propagated up to the parent window as well.
Here is a full demo and explaining of this weird bug. Back Button Behavior on a Page With an iframe
3-reasons-why-you-should-not-use-iframes
Reason #2: iFrames cause usability issues
The iFrame tag is notorious for creating usability annoyances. Among most common of them are:
* it tends to break the "Back" button in the browser being used;
* it confuses visually impaired visitors, using screen readers;
* it confuses users, suddenly opening the iframe content in a new browser window;
* content within the iframe doesn't fit in and looks odd because it can ignore the styles sheets from within the main website;
* content within the iframe is missing since the source URL changed; and,
* navigation of the site in the iframe stops working.
I figured out the problem and a solution. The problem was that I had an iframe on the form page when the form was first loaded and somehow (I don't know why) that was causing the problem described above.
However, I decided to remove the iframe from page-load, and instead dynamically create an iframe via JS when it was time to upload files. Once the files were uploaded and the iframe onload event fired, I then removed the iframe from the DOM via JS and it no longer caused the problem occurring above.
I'm honestly not too sure why that fixed the problem or if it's just a potential issue with browsers, but all the same, for anyone that wants to use an iframe to upload files on a form without reloading the page, be sure to not have the iframe on the page when it first loads, and instead dynamically add the iframe only when you need it and remove it when you're done.
Is it possible to cause Google Chrome to prevent painting... as in, to keep the page exactly the same, no animations or content changes.
The reason I ask is because I have created an extension for people who find it difficult to read webpages when things are animating/flashing/changing/etc.
It currently works by taking a screenshot and layering it over the page (position absolute, with a high value z-index).
But because captureVisibleTab cannot capture the whole page (issue 45209), the screenshot needs to be re-created every time the user scrolls the page.
However the change in iOS 8 Safari to not pause printing while scrolling got me thinking there may be another way around this by trying to emulate the pre iOS 8 behaviour (something I preferred, as Reader View does not always work, or stop animated gifs).
You cannot stop the execution thread, its browser who decides it.
However to prevent CPU Cycles What chrome does is, Pauses the javascript execution thread when window is blurred. But since you are showing captured with higher z-index you window will still be active.
One possible way :
Disable the script for that url when the page is loaded.
You might miss the dynamic content but as you asked "no animations or content changes". Any dom or style manipulations by javscript causes repaint of the page. Disabling it might be one solution. However not pretty sure about how to stop css animations.
I have also seen extensions that can capture full webpage image or pdf. you can capture the full page and show them irrelevant of whatever changing in the background
I am trying to hide the address bar for a webpage. On Iphone 4 and lower it works using
window.scrollTo(0,1);
and meta tags
.
But for IOS 6, these do not seem to work. I have checked other similar questions in stackoverflow, but could not find a solution that works. Has anyone faced a similar issue? If yes, is there any solution other than adding the site to the Home Screen as a web app and then launching from there.
Thank you.
After playing around with the script I noticed the following:
The address bar hides whenever I reload the page.
So as a workaround to this problem, I trigger the reload event (through a resize function ) and do window.scroll(0,1) in the resize function.
I have a function
var hideAddressBar = function() {
if(document.documentElement.scrollHeight<window.outerHeight/window.devicePixelRatio)
document.documentElement.style.height=(window.outerHeight/window.devicePixelRatio)+'px';
setTimeout(function() {
window.scrollTo(1,1)
}, 0);
if(navigator.userAgent.match(/Android|iPhone/gi)){
window.scrollTo(0,1);
}
}
I initially was calling this function only on the Onload event. Tis was working for ios 5 but not for ios6. I realized that in my script there is a resize function being called after rendering the page. So i made an call to the hideaddressbar function at the end of resize. So you may want to check in your script if, after rendering the page are you resizing or reloading again? If so, then call the hideAddressBar after it is done reloading. I hope this solves your problem.