To reload/refresh a page from another page using JavaScript. (A page, which is already opened in the browser. I need to refresh it (not open again) from another page.)
I refer a lot, but i can't get the exact answer i want.
How to refresh another page using javascript without opening the same page in a new tab
I referred this page. But it has a parent and child page. But i need to refresh a unrelated page from another page.
Is this possible?
If so, give me some suggestion.
Explanation of my actual project:
There is a pageA from that using Ajax i called some other page(inside a div of pageA). Then by clicking a link in that div (present in page called from Ajax), it will open a pageB in new tab in the same browser. in that page, when user clicks a button, It will call another page, in that page i do a table update. After that update, pageA should be refreshed. This is the actual project what i have to do.
Assuming this is in the same browser and the same domain a simple way is as follows (pseudo code)
Page A -> controller
Page B -> page to be refreshed.
The steps are:-
Page A Calls a Javascript function (via button press for example) that writes a value of 'update: true' to local storage.
Page B has a loop of 500ms that checks this value in local storage - when it sees 'update: true' it sets it back to false and then refreshes itself.
These are all simple things to look-up how to do but if you get stuck just let me know.
Oh and same principle applies on different browsers (i.e. if Page A opened in chrome, Page B opened in Firefox) - just that instead of local storage you use a server and store the state to DB / a file.
Below is a quick example - open the two pages in different tabs then click 'refresh' in the controller apge - you will notice the 'page to be refreshed' page refreshes.
CONTROLLER
PAGE TO BE REFRESHED
first of find frames(or div) which you want to reload
for example
enter code here
var myframe=parent.frames['frameName'];
then
myframe.location.href=myframe.location.href;
i hope it will work well.
in my case it work fine.
thakns &BR
Related
I need a functionality that will retain the page into its navigated state so I build it using local storage. I added remove local storage on $(document).ready to reset the view when the page is refreshed. The problem I'm encountering is when I navigated back, the local storage is removed also. How do I know if the page is refreshed using F5 or navigated back using browser back button?
Note : Though MDN's article states that webkit browsers don't support it, their latest versions do on my computer.
The PerformanceNavigation Object gives you this exact information.
It's type property will return one of these status codes :
TYPE_NAVIGATE (0)
The page was accessed by following a link, a bookmark, a form submission, or a script, or by typing the URL in the address bar.
TYPE_RELOAD (1)
The page was accessed by clicking the Reload button or via the Location.reload() method.
TYPE_BACK_FORWARD (2)
The page was accessed by navigating into the history.
TYPE_RESERVED (255)
Any other way.
and you get it with performance.navigation.type.
When accessing an external page from a Cordova app, then coming back to app with back-button, the app page is empty, or more precisely, everything that was dynamically added to the page is gone.
This seems to be the case whether the link is a native <a href="..."> or is accessed via window.open(), or via cordova.InAppBrowser.open(). The only way it does not happen is when the actual browser is specified via "_system" parameter.
Is there a way to prevent this, or is it normal behaviour ? Should I simply rebuild the dynamic page upon returning ? I could do that, but no event seems to be fired on return, not even a pageshow.
Navigating back refreshes (reloads) the page...so anything dynamically added to the page will correctly be gone. You could use hash tags on the URL for simple information or localStorage for more complex information about the page state and re-populate the page based on it when it reloads.
pageshow most like isn't firing because of some assumption being made in the JS code. Try listening to the $(document).ready for debugging purposes. It could also be caused by the issue described here (because of caching): 'pageshow' is not received when pressing "back" button on Safari on *IPad"
Specifying system causes the page to open in a new window...so that's
I am using WebdriverIO with Javascript and Mocha to create a UI test framework. For that, I am trying to capture screenshots every time a page loads or a page refreshes. Could someone please tell me if this is possible to do it using WebdriverIO or otherwise?
Relevant details: The pages are NOT loaded using driver.url() all the time. The launching URL is arrived at using driver.url(), and then on all navigation happen by clicking on a link on a page or performing an action that leads to another page load. Please also note that page load happens on other conditions as well, for example, when a "Save" button is clicked the same page loads again (refreshes). I am trying to capture a screenshot every time a page loads or refreshes irrespective of whatever action that might cause it. And that's why I want to abstract out the process at a global level than calling driver.saveScreenShot() in multiple places all over the codebase.
The Facebook chat window remains open, unchanged, to refresh the page, or even when we change page. How to reproduce something similar? Tried with frameset, but it did not work.
How to keep a div open a window similar to the internal, even after refreshing the page or clocar on a website link?
Like them, you can try -
The data is shared between facebook pages. Probably HTML5 localStorage? Cookies? I'm not sure.
If you notice, they don't "refresh" the page, they ajax-refresh the content on the page for subsequent loads. (unless you manually navigate to the same page, of course.)
Finally, its all CSS mainly some z-index put to use.
I hope those 3 are enough to get you started.
I don't think the whole page of Facebook is loaded. Every link has it's own 'target'. Most of them fetch a page (I think with simply AJAX) to show, others to just change some partials of the screen. So let's say, you have two divs. One div is the chat-div. Positioning fixed and all, z-index on 100, it will always stay on top. The rest of the page is the other div. Within this div, you can load certain pages with AJAX, without the whole screen to refresh.
As with reloads of the screen: you can easily save (also with AJAX) whether the user closed the chat screen or has it opened. Just create a table in a database called 'chats' or something, then when a chatscreen is opened you put an entry in that table with 'person_1', 'person_2' 'lastmessage' and 'active'. When they close the chat, you can put the 'active'-field to false. Then, whenever someone loads the entire website, you check the table chats for active chats, and shows them when there are any.
I would look into qjuery-qjax: https://github.com/defunkt/jquery-pjax
From their docs:
pjax works by grabbing html from your server via ajax and replacing the content of a container on your page with the ajax'd html. It then updates the browser's current url using pushState without reloading your page's layout or any resources (js, css), giving the appearance of a fast, full page load. But really it's just ajax and pushState.
A website contains a "random" link, which loads a url that returns a 307 redirecting to the url we want. It works fine: click it and you load a random page. The problem is that each time you click it, the browser assumes you're loading the same page: so if you're on the homepage, then you follow the random link 5 times, then you press back, you'll be taken all the way back to the homepage, with no way to find the random pages you were just looking at. I want to modify this behavior so that users can access previous random pages via the back and forward buttons.
I don't own the website, so I can't just change the redirect code.
Here's what I've tried, all of which has failed.
Predicting what would be redirected to. While somewhat possible, there would be no way to avoid failure in up to .1% of clicks, and it would react very poorly to unexpected events, like a page that's published a day late, let alone a sit structure change.
Loading the 307 page via ajax. The request stops at readystate == 2 and I can't access the location header.
Cancel the click event and instead set location.href = random_link.href. This has no effect - the new page still doesn't go into history.
Have the new page call history.pushState. This successfully adds the page to history, but I can't find a way to distinguish between new pages and ones being opened via the back button, so the history quickly becomes very corrupted.
Keeping my own history in localStorage. As above, I can't tell when the back button is being used.
I'm working on a solution that I'm pretty sure will work, involving loading the page in an iframe over the existing page and using a background process and messaging to work around the fact that content injections from chrome extensions can't access window.parent from within iframes. And using the history API to reflect the current iframe's URL in the address bar, and get the back and forwards buttons to apply to the current iframe where appropriate.
While I'm pretty sure the last solution can be made to work, it's a hideously complex and heavyweight approach to what seems like a simple problem. So I thought I'd ask you guys before I continue: any other ideas?
Have you tried storing the locations in localStorage, then hi-jacking the back button ?
I am sure you know how localStorage works, for hi-jacking the back button you can refer to this : Is there a way to catch the back button event in javascript?
T.