First of all, I know that the topic of accessing iFrame Elements cross-domain is a tricky topic and I might be going with this nowhere.
I have a Google Forms embedded in my app that I need to set up in a way to tell me when a user has submitted his/her response. I already tried lots of things but the most optimistic way that could work would be just to read the HTML of the iFrame when the last page has been loaded saying that the response was submitted.
Therefore, I was looking for solutions on how to simply read any kind of snippet of the iFrame's content and I came across this comment in another thread:
https://stackoverflow.com/a/32265508/3856569
I'm trying reading the content of the iFrame as suggested in the comment and sending it to the parent windows via postMessage like so:
$(document).ready(function() {
document.getElementById("googleForm").addEventListener("load",
function() {
var message = document.getElementById("googleForm");
parent.postMessage(JSON.parse(JSON.stringify(message)), '*')
});
})
and the parent-window reads the message like so:
function receiveMessageGoogleForm (event) {
console.log(event)
}
//Listen for message events
window.addEventListener("message", receiveMessageGoogleForm, false);
However, the data property of the event object upon receiving the message seems to be empty.
Is this another inbuilt mechanism to avoid reading any kind of a cross-origin iFrame or am I missing something here?
Forget about postMessage for a moment.
var message = document.getElementById("googleForm");
var result = JSON.parse(JSON.stringify(message));
console.log(result);
<div id="googleForm">content</div>
If you pass a DOM element into JSON.stringify then you get a (JSON representation of an) empty object out.
DOM elements don't have any properties that will be automatically processed by JSON.stringify.
If you want to get data from a form, then you need to actually read the data from the form (e.g. get the input elements and read their value properties).
If you want to extract data from the DOM of a Google Form or if you want to send a postMessage from a Google Form then you need to write the JavaScript which does that in the HTML document containing the form.
You can't pull it across domains.
The page with the Google Form has access to the data and can push it across domains with post message.
Nothing you can do will let you just help yourself to that data.
It's private between the owner of the browser and the owner of the website and one of them needs to take explicit action if it is to be shared with anyone else (e.g. someone who has wrapped that website in an iframe).
Related
So I have this page that contains a form that is an iframe(different domain). After sending the form, I get a confirmation in the iframe. What I need is to get that post response from that iframe. In Chrome's dev tools, in the Network tab and XHR only, I can see that https://my-website/api/v2/booking/reservations has a response.
Basically I need to know when I get a response from the form sent from that iframe. After clicking send form, I get the confirm(post response) and that's all I need. I tried using Javascript's event listener for post message where the origin is the iframe but all it returns in its data property is the height of the iframe and it varies with every response. Does anyone have any ideas?
I tried using Javascript's event listener for post message where the origin is the iframe but all it returns in its data property is the height of the iframe and it varies with every response
This is because the page you are putting in the frame is sending that information to the parent (so it can dynamically adjust the height of the iframe).
If you want to know something else about the page (such as when it has made an HTTP request) then you need to change that page so it sends (using postMessage) the information you need.
You can't collect arbitrary data from other people's websites just by putting them into a frame. That would be a horrible security problem. You can only collect the data they send you.
How can I make a POST request to some URL (see my code below) in Javascript ?
My code so far doesn't work and I actually need to put it into an iFrame (having its with and height set to 0) to prevent the main page to reload.
$(document).ready(function(){
$("button").click(function(){
$.post(
"http://control.msg91.com/api/sendotp.php?otp_length=4&authkey=xxx&message=Your OTP is ##OTP##&sender=OTPSMS&mobile=xxx&otp_expiry=2"
, function(data){
alert(data);
});
});
});
If you want to use an iframe, then do not use XMLHttpRequest (NB $.post is a jQuery that wraps around XMLHttpRequest).
Create a <form>. Set its action to the URL. It's method to POST and its target to the ID of the <iframe>.
Put the data in that form. Then submit it.
If you want to do this entirely with JavaScript, then you can create the form using DOM and with entirely hidden inputs so that nothing shows up in the existing page. Ensure that you append the form to the document as some browsers will not let you submit forms that aren't part of the document.
That said, since you want an iframe with no dimensions, it seems odd to want to use an iframe at all.
You might be trying to work around CORS limitations, but you should be able to use the code you are using to make a request successfully. You just won't be able to tell if it was successful or not (because the restrictions are on reading the response). If you used an iframe, you would have the same limitations.
If you want to suppress the error message that is shown in the console, you could use fetch with mode: "no-cors". You still wouldn't be able to read the response though.
Make sure you are not hitting an issue with CORS. Unless the resource you are hitting allows exceptions to the cross-origin policy, you will not be able to access it if your webpage is not located on control.msg91.com.
I'm trying to cheat a bit with localStorage. The spec defines that when a value in localStorage changes, all other open pages on the same domain receive a storage event callback. I would also like the event to fire on the page where the value was changed.
I added a hidden iFrame to each page which loads an empty document from the same domain and tried using it as the target for the localStorage change (so technically the page that I'm looking at isn't the origin of the localStorage change)
It works fine except for when I do the same thing inside an event callback...
function fnSetupMusicPlayerSection(i, oSection) {
var oAudio, oLocalStorageFrame, oLocalStorageWindow;
oAudio = oSection.querySelector('audio');
oLocalStorageFrame = oSection.querySelector('iframe.local-storage-target');
oLocalStorageWindow = oLocalStorageFrame.contentWindow || oLocalStorageFrame;
oLocalStorageWindow.localStorage.setItem('loadSetter', '1111');
oAudio.addEventListener('play', function(oEvent) {
oLocalStorageWindow.localStorage.setItem('callbackSetter', '2222');
});
}
loadSetter is successfully stored and all windows receive the storage event. When I click to play the audio I get the following error inside the callback - Uncaught DOMException: Failed to execute 'setItem' on 'Storage': access is denied for this document.
Is there anything I can do to solve this? I really don't want to have to write code to update the current page separately
Update: I don't know if I'm doing something wrong in the example I gave above but the code does seem to work inside some callbacks. I have an anchor on the page with a click event where I can set localStorage through the iFrame
You can try postMessage API to enable communication between your page and iFrame. In brief, send a message to instruct iFrame to update its localStorage, and another message to ask iFrame to return its localStorage content whenever you need the data you sent.
Be careful since:
This is a HTML5 API. Check if your app's minimum requirements allows the implementation.
This is a cross-origin communication, which means if other pages in your browser use postMessage, your iFrame will receive it too. You might need to add info into message to notice iFrame which message it should read.
I have a form that uploads a file in an firame to a remote server. As a result at the submission url server returns json data with the result of operation, which my iframe catches.
{'result': 'true' or 'false'}
Now I'd like to retrieve this json as the callback of my iframe. I know that I need jsonp to achieve this since it's a cross-site call. Here's my function with sample code from IBM' site :
function fileUploadFunction(){
var fileUploadForm = $('#file_upload_form');
fileUploadForm.attr('action', uploadURL);
fileUploadForm.submit();
$('#upload_target').load(function () {
alert("IFrame loaded");
$.getJSON(uploadUrl+"&callback=?", function(data) {
alert("Symbol: " + data.symbol + ", Price: " + data.price);
});
});
};
But here few problems arise. First - my uploadUrl is just "http://something/" . Do I need it to support calls with $callback= suffix ?
Secondly - server gives response only as a result to file upload. So I need to get the result that is stored in my iframe and not at the specified url. How to solve this ?
Here's the link. Notice hidden iframe inside the form. Result from server shows there. :
http://ntt.vipserv.org/artifact/
EDIT
I've previously tried :
$('#upload_target').load(function () {
var ret = frames['upload_target'].document.getElementsByTagName("body")[0].innerHTML;
var data = eval("("+ret+")");
});
But it raises 'permissions denied' error.
This is easily done with easyXDM and there is actually a blog post about this exact use case here.
In essence what it does is use cross-domain messaging to relay the response to the invoking document.
Update: Here is a link for this in action, the source can be found at github, the files are prefixed 'upload_'.
Sean's easyXDM recommendation is a great option (& should probably be marked as correct), but I wanted to suggest another light-weight solution that I haven't seen anyone use.
In cases where you're posting to a hidden iframe on another domain & just need a single response back (not two-way communcation), you could pass a message from the iframe to the parent using a busted url. Here's an example:
the parent loads an iframe on different domain
the parent polls myframe.contentWindow.location.href (constantly getting Permission denied errors since the frame is on another domain)
iframe processes, then redirects to
http://parentdomain.com/pagethatdoesnotexist?{'result':'ok'}
iframe gets a 404 but now the location is available to the parent
the parent reads the message from the iframe's URL
one possible solution could be to set the name of the iframe with pure js. This name could be read from the wrapping parent page.
Looks to me that your code will request uploadURL twice: first, .submit() do a POST request to upload the file and the result is shown in the iframe as a webpage; second, .getJSON() do a GET request and the result is executed as javascript in <script>. You will realize this if you open up Firebug while testing your app.
Since two of the requests are independent, I have no idea how .getJSON() will give you any information about the file you just uploaded with .submit().
For these kind of cross-domain communication, I would suggest using postMessage; otherwise you will need to change you application workflow to do everything in the iframe after file have uploaded; e.g. do <script>alert('Submission accepted');</script> in the iframe.
What are you trying to do after a user have successfully upload a file?
dont use .html() at all.
I used
jQuery('.someElement')
and it worked for me. you can save the result in a variable and insert it in new element
e.g
var = jQuery('.someElement');
jQuery('.newElement').html(var);
I am opening a window and passing set of parameters to it. In this case, I am sending json string. At time, the info is toolarge, and Request-URI Too Large occurs.
window.open('../pssops21/php/createPhonePdf.php?strSelectedItems='
+ strSelectedItems + '&strQBNumbers=' + arrQBNumbers, 'mywindow',
'resizable=1, scrollbars=1, left=80,top=60, width=650, min-height=400')
Window.open does not have option to post. Jquery ajax only posts info retrieves, results and does not open a new window.
Are there any methods to do this?
Thanks.
Unfortunately this is tricky situation in web applications. The limit on the size of a URI is typically dictated by the browser you are using and the option to POST data is not a standard available. As for doing an Ajax post and then "loading" the results, is typically not supported for security reasons.
A workaround I have used in the past is to make it a two-step process. Basically use Ajax to post your json data to the server. As a response, have the server send back some kind of token to retrieve the stored data. Then, use that token as a parameter to the new window you are opening, who can then retrieve the data.
I know it is a little bit more work to get the data over to your new page, but it does eliminate these size/security restrictions, and is a cross-browser safe.
You could open a new window to a temporary page, then POST from that page in the new window using a form filled out by JavaScript in the original page.
You could use a hidden form that has your destination page as its target. Use hidden fields for your post values, and submit the form using the Javascript submit() method.
I believe this will only work if you're trying to redirect the current window, not open a popup, although there may be a way around that restriction as well.
Rather than embedding information to pass to the window in the querystring, you can use javascript directly. Using window.opener on the newly opened window, you can access info from the child page:
var selItems = window.opener.strSelectedItems;
Keep in mind that strSelectedItems in this case would need to be globally scoped in the parent page. To keep things clean, I would consider functions on the main page that will return the information the child page needs.