I'm trying to build a form that will be embedded in customer websites via an iframe, and I'm struggling to figure out how to pass data from my iframe back to the customer website it's embedded on.
I basically want to do what Plaid Link does with their iframe, where when they finish authentication, they call the parent website's onSuccess function, feeding in a public_token and some metadata as parameters. How do I get that token and metadata from my server to the client iframe and then to the website the iframe is embedded on?
Check out window.postMessage - it lets you communicate between a iframe and its host window.
Related
Here is my situation. I have a webserver running a PHP MVC app. I have various HTML forms that the user can fill out and submit, which generate a POST request, and my website responds with a page acknowledging the data sent in the POST, all good.
Now we have a situation where we want to have a PDF form with fillable fields. I can use Acrobat to put fillable fields directly in the PDF, and add a Submit button that will cause Acrobat to generate a POST request back to my website (the URL is embedded in the Submit action in the PDF). This works fine, except that it requires the end user to download the form to their computer and open it in Acrobat. Although web browsers can typically display PDF forms, and allow the user to fill in fields just fine, the submit button does not work. And when using Acrobat, the response to the POST sent by Acrobat to my webserver, of course goes back to Acrobat, so it gets rendered in a new tab in Acrobat, not in the browser that the user used to download the PDF. Sort of okay, but not a great user experience.
There are websites like formrouter.com and goformz.com that let you define fillable fields on a PDF that you upload, and provide you with a public URL where end users can fill out the form and submit it. At the moment at least, the person creating the form has some options for what the Submit button should do, but neither one of them offers an option to send a POST request to a specified URL. I'm talking to the folks at goformz to see if they would add such a feature, making it more "feature compatible" with Acrobat.
But the problem with having another website like goformz.com send a POST request to my website is simply what to do with my website's response. It doesn't make sense for them to try to render it in their goformz tab in the user's browser. And I don't see how my website can do anything about it in the tab that the user has open on my website that they started from. I guess I could open the goformz page in an iframe, and simply tell the user to close the iframe after they submit the form, but I don't think that a response coming back to that iframe can affect the containing window in any way, can it? AFAIK, it wouldn't really be any better than opening the goformz page in a new browser tab.
Does this make sense? Any suggestions?
Goformz does currently offer an option for the Submit button to email the completed form to an address specified by the form creator, so as an alternative to the POST request, I could have the submit button send the PDF as an attachment to an email to a specific address on my server, and have the server monitor that inbox and process the form data appropriately. But the HTTP response to pressing the Submit button could at most be to acknowledge that an email was sent from goformz.com, the response to the web browser could not contain any information about the form values produced by my website. Any information like that would have to be sent back to the user by email - or is a "push notification" something that could work in this situation? If so, I suppose a "push notification" would also work for sending the response to the POST request made to my website back to the user who clicked the Submit button on the goformz website. I guess this shows that I know nothing about "push notifications". I just heard they were a really cool feature of mobile apps, but that modern browsers could also do them...
BTW, I asked this on SuperUser, but it was closed as off-topic. I hope it's on-topic here, cause I couldn't find a more appropriate Stack Exchange site...
ISSUE :
The JS in Acrobat knows the DOM of the PDF while the JS in WebBrowsers will not know that.
Moreover the JS in Acrobat can not control the WebBrowser tabs because it can not know about the WebBrowser itself.
That is why the Current Workflow is to manually Print (& Mail it over) or Download (& Email it over) which avoids the given Issue.
POSSIBLE SOLUTION :
If you want to change that Workflow , then :
You should make Equivalent HTML5 to look like the PDF
When the user clicks Submit , you can validate it with JS
Then WebBrowser will POST it to your WebServer
Now your WebServer can store the Data & Process it
Your WebServer can then generate a PDF to show in a new tab which will also avoid the given Issue.
Available tools :
https://www.idrsolutions.com/online-pdf-to-html5-converter
https://www.zamzar.com/convert/pdf-to-html5/
https://www.adobe.com/acrobat/hub/how-to/how-to-convert-pdf-to-html
https://document.online-convert.com/convert/pdf-to-html5
You might want to try that.
I am using a web browser for a ticket sales system. After I login to the system, I fill out the form to send the request for the ticket, but some problem occurs.
The browser sends the request succesfully, but when the ticket page is loading, the browser calls iframes as empty. I can't see the existence of iframes and unfortunately, iframes include the result of the request. I thought calls include the ticket, but the boss does not want it.
I want the result to be displayed in the iframe.
I just use Webbrowser1.Navigate("pageurl") for calling the request form page. After that I filled out the form and click the submit button programmatically:
WebBrowser1.Document.GetElementById("sbmtBTN").invokeMember("click");
How can I solve It
I solved the problem. Before I call the the page, Blocked main page of Iframe. I re-call the pages with their main pages and iframes run.
I have an iframe canvas app that requires accepting of an auth dialog before use, i.e. from a browser point of view, all requests are immediately redirected to the auth dialog if the user has not already accepted them.
This means that the Facebook parser cannot read the OpenGraph tags on my page because it can never get past the authorisation point.
In a broader scale, this problem would also occur on any page that requires a login before viewing.
What would be the best way to work around this issue?
One solution I have is to check if the Organization that the client IP address belongs to is Facebook and if so let it in without authorisation, and display a page with no content except the OG tags. This is fine for robot programs access from Facebook, but what happens if an employee tries; I don't want my app to be disabled because someone from the policy team cannot properly verify the app.
As to why I need OG tags - users regularly share the link to the app and it looks bad with just a URL as the title and description and no image.
You need to allow Facebook's URL scraper to view your objects.
Best way to do this is to check for the string 'facebookexternalhit' in the useragent string. If present, return a stripped down HTML page containing the OG tags for the Facebook's scraper to read.
On https://www.eventhello.com/overridden_routes/not_mobile, I have an iFrame displaying the mobile version of our application. When from within the iFrame a visitor tries to connect with LinkedIn, Twitter, or Facebook using OAuth, it takes over the parent window.
Is there any way to have the open auth open in a new window and then go back to the iframe within the parent window when complete?
I don't believe this is possible nor wanted behavior. The user would be unable to confirm the URL they are accessing. I certainly wouldn't enter my credentials into an iframe.
I have a iframe window which displays user's flickr images. I use the flickr.photos.search api to download the user's image from flickr. This works great when the user is logged into flickr.
But when I explicitly log off the user from flickr and the yahoo network and then attempt to download the flickr images, I get redirected to www.yahoo.com in a full browser window (not in my iframe).
If I remember correctly, I did not have this issue when I was not using iframes and I was being redirected to the yahoo login screen.
Any suggestions?
To elaborate, this URI - http://www.flickr.com/services/api/auth.howto.web.html, lists the below step -
Create an auth handler
When users follow your login url, they are directed to a page on flickr.com which asks them if they want to authorize your application. This page displays your application title and description along with the logo, if you uploaded one.
When the user accepts the request, they are sent back to the Callback URL you defined in step 2. The URL will have a frob parameter added to it. For example, if your Callback URL was http://test.com/auth.php then the user might be redirected to http://test.com/auth.php?frob=185-837403740 (The frob value in this example is '185-837403740').
This does not happen when I am in my iframe window but it does happen in my full browser window.
I posted the above question in the flickr forums and I received a response which said this cannot be done in iframes. So, I would need to rejig my UI to achieve this.