I have a page which contains an iframe. The iframe can take user's input (via button click or menu selection) and display content accordingly.
What I need is, when a user manipulates the iframe, the browser push each set of iframe parameters into history; and when the user click at back button, the iframe will reload its content using the saved parameters from the previous history entry. I have a piece of code doing the reloading as shown below.
The strange thing is, when I make multiple settings on the iframe (hence multiple state entries added to history), and then click at back, it'll work like this,
Say that I have state 4, 3, 2 in history and I'm now at state 5
the first click restore to state 4 (the "----state changed----" logging message is printed
the second click reloads the iframe with default content. The "----state changed----" is not printed; the reloading code is not called.
the third click restore to state 3
the fourth click is like the 2nd click
the 5th click restore to state 2
So after each click that successfully restore the state, it takes two clicks to trigger the popstate event (I tried statechanged event, too, with same result) and restore to another previous state.
Anyone know what's going on here? Thanks in advance.
History.Adapter.bind(window, "popstate",
function (event) {
console.log("----state changed------", History.getState());
console.log("----state data------",History.getState().data.state);
//code to do reload an iframe to its proper state
});
So I stumbled on this same issue. The situation we had was using history.pushState() to update the URL and then after that changing the src attribute of an <iframe>. By changing the src of the <iframe>, we are implicitly telling the browser to add to its history that the iframe had changed. Thus...
When we pressed back the first time, window.history's popstate is
triggered on the <iframe>'s src attribute and is reverted back to it's previous state.
Pressing back a second time triggers the popstate event for the state you originally pushed onto the stack
Our solution involved that when we decided to update the URL and push the state onto the stack, when we wanted to update the <iframe>, we used jQuery to replace the <iframe> list so...
$("#iFrameID").replaceWith(('<iframe id="iFrameID" src="' + location + '"></iframe>'
By doing this, we removed the side effect of the browser history getting polluted with our update to the <iframe> tag.
I had the same problem.Instead of navigating the user to the previous page on the website, the back button navigated the user to the previous page inside the iframe. This code below will help you to solve your problem:
iframe.contentWindow.location.replace(href)
Related
Okay so I am trying to create an automation to click on a button once it appears. I was able to find the code within a javascript source file in the website's code files that creates the element that contains the button in question, however it is not always there. It is generated once a trigger on a different UI is enabled, then it shows up on my end. I want it to automate clicking the button as soon as it appears.
Is there a way to do this? I am super new to code.
An example of what I am trying to do:
Someone in one UI creates an account that needs to be approved, it pops up an element on my end with an approve or deny button. I want to automatically and basically instantaneously click one of those two buttons any time it appears.
This is not exactly what I am trying to do, but it is similar. I do not own the website I'm trying to go this on*
I have no clue what I'm doing at all....
First, I create a link to the url #.
When I hover over the link, I see the browser turns it into http://[current url]/raw#.
Here is the strange part. I click the button to increment the counter. Then I click the link. My browser's back button shows my location has changed. But the counter state is preserved!
This example shows the behavior.
What is going on here?
shown here w3schools This is a bookmark feature of links. It doesn't exactly pull a new page , just navigates within the current page.
Forward and back still preserve the path but the entire page isn't refreshed.
I have one requiremt like There is button which is named Start/Stop. When he clicks the button first time number of hours caluclated until he clicked second time on same button (i.e Stops).
E.g:- He clicks first time (time interval should be caluclated) and he clicks second time (stop) after 8 hours. So total time is 8 hours.
2) When he clicks first time (i.e Start ), appliation should not allowed to access of other pages. Once he clicks second time (i.e Stop) then it should allow the application.
Thanks,
Ravikiran
One of the way of making it work is to use the modal popup covering the entire page once the user clicked the start button and put the second button on the top of it to close . jqueryUI modal popup is one of the example. My solution does not stop user to type the path in the URL and try. In that case you can put the value in Session with the flag saying
if(Session["Started"] != null)
{
//redirect to same page where the timer is running
}
This is going to be almost impossible to stop the user from going to another page via the address bar.
Ignoring the address bar problem for a minute, you will need to have client-side logic to check for events happening in the browser (i.e. user closing a tab, hitting back button, etc.), which if you are only using server-side logic it will be too late to catch.
It really sounds like you need for this to be a WinForms/WPF/Silverlight application instead of a browser-based application, because of your need to restrict navigation.
i have a little problem. I'm using Oracle Applicarion Express and i'm trying to use some page items in a Link created for a button. I created the Button as region button, and selected in the region" Action when button clicked" "Redirect to URL". In this URL i want to use two pageitems. I tried already to use them mit ":PAGE_ITEM" or "&PAGE_ITEM." but non way works. Can someone help me please?
What does the resulting hyperlink look like? The chance is great that it looks like
f?p=<app_id>:10:<session id>::::P10_ITEM1,P10_ITEM2:,
This is because when using the substitution syntax like &PAGE_ITEM. will put the session state of the referenced item in the string. Since the button is rendered during the loading of the page it will use the session state of the item at that time.
When you then fill in a value for PAGE_ITEM, this will not change the session state of that item - and even if it did it would not matter since the button was already rendered.
If this is the case then you'd better have the button submit the page, and define an on submit before validations/computations branch to act on that button. In the branch you can then safely use the session state of the required items.
I nailed down a weird behavior on JQM.
Since the page is based on JQM Boiler plate, I do not include the full page here. I published the code on jsfiddle.
Here is a summary of the behavior click actions:
Here is the extract of the relevant code:
<div id="oneapart"
data-add-back-btn="true"
data-back-btn-text="List"
data-role="page"
data-title="Home page">
I do not understand why the last click on the List button (a jquery mobile back button) requires 2 click to actually act on the link. In fact, the weird behavior is that a first click highlight the button in blue, but it remains as is without switching to the previous page until a second click happens.
Any help will be appreciated.
Regards.
This issue can be fixed by adding the data-rel="back" to the button in the popup.
The issue posted on Github has been marked as resolved because of that.
The issue happens because data-rel="back" is missing in the link of the large cancel button in #jerone his fiddle. See "Closing dialogs" here: http://jquerymobile.com/test/docs/pages/dialog/index.html
The back button on pageTwo is dynamically created. When you don't use data-rel="back" on the link that brings you back from dialogThree (which is also a page) to pageTwo it adds an item to the history stack. That's why the back button on pageTwo then requires two clicks to actually bring you back to pageOne.
The active state is removed from a (back) button on the pagehide event. On the first click you stay on the same page, so this event doesn't fire and the button keeps the active state.
I added data-rel="back" and then everything works as expected: http://jsfiddle.net/jEesE/6/
Closing as resolved.
The bug you're describing consists of 2 parts;
why does it require two clicks to revert?
why stays the button active (blue)?
The first part of the bug is not a bug; you open a popup, but instead of going back (e.g. data-rel='back' you open a page that is the same as the previous one. So if you press the back button, it reopens the previous page that is actually the same page as you were on right now (if it make sense).
Why the button stays active, I don't know...
EDIT: I cleaned up your code a bit: http://jsfiddle.net/jerone/jEesE/3/