I have an iframe in my react app that links to an external site where people can fill out a form to sign-up for service. On chrome and firefox this iframe works fine, if you fill out the form itll allow you to click next to move to the next set of form fields to fill out. however on Edge, ive noticed that no matter what you do, once you hit "next" to go to the next form field, it will breifly go to the next page, however it will "refresh" so to speak, and back up to the first form field. effectively keeping you from filling out required fields.
is there a way to ensure browser compatibility here? ill note that the external site uses a lot of JQuery script to perform its necessary functions. but it shouldnt be that as that code also has a script tag that imports the JQuery CDN so it should function correctly.
The iFrame tag needs a secured connection, Was using an http connection, the reason i could not move forward was because the page that was loaded needs a secured connection to move forward.
Related
Posting without a target so that a web page reloads seems useful behaviour for some things - such as writing a login page. I have implemented a calendar in PHP which takes advantage of this. It reloads an object from the session (or creates a new one if not present), applying any changes that result from the post then saves the object back to the session. The problem is this. If I hit the back button I don't want to go back through every click of the calendar button but would rather jump back to the page before arriving at the calendar page. Not only that, if I do go back one calendar page after another I get an annoying "confirm form resubmission". I have implemented an incrementing value after the # for each post so that I might be able to use window.onhashchange. The problem is that window.onhashchange never fires so I am unable to intercept the back button and pop the history stack. Any ideas? Am I better off coding on the server side with javascript?
Well I solved one problem. My form subclass in PHP defaults to using POST as I understand this is more secure. This causes the annoying resubmission problem when using the back button. I now use GET in my calendar page which solves this issue. I am still bemused by JS debugging in Netbeans. I have never got script to stop on a breakpoint within a single document. I have previously had it working with an external javascript source but this no longer works. If I can output to console but there is no window in which to see the output. I am told window.alert no longer works for some events in Chrome. I am completely blind! To add to the irritation, it took me a while to realize was that the javascript file was cached and changes would not be reflected in behaviour. I have put a random number into the script tag which fixes this issue. As I am debugging using netbeans connector in Chrome I have no idea why this does not force the js file to refresh. All in all, this appears to be a pretty shambolic toolchain.
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.
I got a site that loads multiple recaptcha at once in iframes.
I was wondering when a user hit enter after typing the captcha if there a way to add a key event to toggle to the next iframe box and enter the next recaptcha?
Most of the site is written in php but there are some stuff javascript added
You may be better off using a different recaptcha method that doesn't require the use of iframes. Finding a work-around for the iframe security sandbox, if even possible, may be more work then it's worth.
I am making a greasemonkey script and i would like a link to go forward and modify the current html and allow the user to click back to go to the original page.
How might i do this? using jquery + greasemonkey + javascript. Targeting firefox mostly.
-edit- http://jsfiddle.net/ seems to do it. If you write random html in the html section, hit run, change the html and hit run again. You'll be able to click back/forward to see the output change (however the html input box stays the same). I am using firefox to view this. Thats the effect i want.
it appears the magic is done on line 91. Is this submitting a form in a frame (perhaps the results frame?) and that is causing the movement in history?
88 run: function(e) {
89 e.stop();
90 Layout.updateFromMirror();
91 document.id(this.options.formId).submit();
92 this.fireEvent('run');
93 },
I don't know if that is possible at all because it is the browser itself that takes care of the navigation history. A new history item is added only when you visit a new page.
If I am not wrong you would like the user to turn on/off the changes you make to the page without enabling/disabling greasemonkey and reloading the page.
The only solution I see for this is to take care of it yourself. Save any changes you make to the page so that you can restore it and add some UI to the page to make the user turn on or off your changes.
EDIT 1:
It seems that jsfiddle.net loads a new page to do that. Using firebug you can see it is not doing any AJAX request to run the code, it is just loading a new page (maybe the same page, with different parameters, but nevertheless it is loading a page.)
EDIT 2:
Yes, maybe it is loading the page in a frame. As you can see from the HTML:
<iframe name='result' frameBorder='0'></iframe>
But this does not change your situation. If you want your logic to be in your greasemonkey script you can't load a new page. Otherwise you should upload a web page somewhere and make it load in an iframe passing it the HTML you want to modify: this is definitely not what you want to do.
It sounds like you want to use a history manager. You could either track the changes you make and undo them when the user goes back, or possibly call a page refreshing function.
So I've been pondering this for some time and trying out various strategies. Basically I'm trying to create a bookmarklet that, when clicked, pops up a header on whatever page you happen to be on. In this header, there is a small form, the contents of which are submitted to a server. Once this is submitted, the header should disappear. In all cases, I've loaded my JS with a simple loader bookmarklet:
javascript:(function(){document.body.appendChild(document.createElement('script')).src='http://localhost/bklts/script.js';})();
The problem is tricker than it sounds - every idea i've come up with fails in some instance - and for now lets forget about IE compatibility, I'll deal with that later.
Idea 1 was to redirect the browser to a page on my server with the form at the top and the original page inside an iframe underneath. This works fairly well, but is very slow: 3 page loads to see the form and the original page, followed by another pageload once the form is submitted to return you to the original page. Furthermore, it breaks on sites that framebust.
Idea 2 was to insert an iframe at the top of the original page, the iframe src'ing the form document on my server. This works wonderfully and only requires 1 pageload (the iframe contents). However, absolutely placed elements on the original page remain in their absolute locations, overlaying my header, while everything else is shifted down. Furthermore, I find it is impossible to get rid of this header after the form is submitted short of also creating a link underneath the iframe which would hide the iframe and itself, which one would click after submitting the form. Long story short, not really production quality.
Idea 3 was not to use frames at all. Insert a div at the top of the page with my form on it, and this form would be submitted to my server. The problem with this of course is that the original page's stylesheets will affect my new div, and I can't for the life of me figure out how to tell the page not to style the header-div (or to style it only with my rules). I'm told this is trivial in jQuery, and while I've started learning/using it, I have not found a way to do this. Also there's also the position:absolute problem as described in idea 2, but I figure that's minor.
Am I being stupid in the way i'm going about this? Should I abandon all hope for making a header and just pop up a new window? I'd really like it to be a header, but a window will suffice if a header is impossible (this is 2009 - pretty much nothing is impossible online these days...)
Anyway, any help fixing the above ideas or a completely new idea is very very welcome.
Thanks a lot for your time,
Mala
How about inserting an <iframe> into the page?
That should be simple and won't inherit the original page's CSS.
You can pass in anything you need for the iframe in the querystring.
I suppose making it self-destruct could be tricky... maybe you could redirect it to a page on the original domain, and poll for that.