I want to make this scenario in javascript:
I have a main html pageA that contain an iframe with child html pageB.
PageB contain js code that submit results to the server using Ajax.
is there a way to make a listener in js code of pageA that can detect if result was submitted?
could you suggest me the best way to achieve this result?
Best regards,
I don't know much about iframes but this sounds like something you could do reasonably easy using Web sockets.
Essentially a Web socket will keep a live connection to the server, such that the server can inform the client of something happening (they're often used in chat applications for example). This differs to the usual whereby a request has to be issued from the client.
So in your example PageA could listen on a Web socket and when PageB sends a request the server then informs PageA via the Web socket.
By using Window.postMessage API.
Please check this out. https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
If one domen, from iframe:
window.parent.bla-bla();
If different domains:
Change fragment location in child iframe, for exam add #exicutebla-bla()
Detect iframe location in parent document, if location #exicutebla-bla() execute blba-bla()
Or
Use this: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
var myForm= document.getElementById('myframeId').contentWindow
.document.getElementById('myformid');
function detectSubmit() {
alert("submit event fired");
}
myForm.addEventListener(myiframe , 'submit', detectSubmit, false);
Note this will not detect script fired submit.
Cross domain issues may arise if the iframe source is that.
Lots of assumptions here due to the questions vague nature.
Related
Let's say we have a web app that only has one element, for example an image IMG1 and if an user clicks on it, it will change to another image IMG2 (this change should be visible only to the users that clicked and triggered the event).
Then, I have another event that triggers when a total of 100 users clicked on the image (or any other back-end related event), and this time I want to dynamically change the image to IMG1 (but now I want the change to happen and be visible to all the users of the website).
The confusion starts when I realise that for both events the function would be the same (changing the src of that HTML img element) yet I want it to have a different effect:
on the event of a user click change it for that user only.
on an outside event that doesn't involve a specific user, change it for all the users to see the same image.
How does this work? what is the thing that makes the difference between a HTML change that only affects the users locally (on their actions) and a change that has a global effect (to all the users).
UPDATE !!!
I should have been more specific with what I don't know.
I'm familiar with AJAX request and I already have the backend sorted.
In the frontend script I have an event listener for the event from the backend, and all my questions are actually about 'what and how to do it' after the event listener is triggered.
Now, what I want to do when this happens is to make some changes, the main one being to change that image IMG1 to IMG2 for all the users (as it would be a dynamic update to the website) but also:
I need that change to be permanent, so in a case of users reloading the page or new users coming in, they all should still see IMG2. (And the only time the image would change would be when the event listener on the frontend script will trigger again on the same backend event to change the image again (to IMG3) for example. And yes, in this example there is NO 'on click' request for the users to change the image, so ignore my example previous to the update.
Now to address your answers, I checked the web sockets stuff and it seems to be doing what I need if I run that 'on event' change of image to all sockets. Which only leaves me with 2 questions now:
1) Will this change that occurs on all sockets to change the image be permanent, so in a case of users reloading the page or new users coming in, they will all see the new image (IMG2) as a permanent change to the webpage ?
2) Regarding these type of permanent changes, isn't reactJs a way of doing such changes dynamically?
What would actually happen if on that event listener (for the backend event) I simply ignore all the web sockets stuff and run the same code of changing the src of the image ?
2.5) Because from how I see it, that event in the backend fires without any specific user input, thus is not linked with any user. So if I simply run the code on that event without websockets It should either do absolutely nothing (so no change for anyone) OR do the change for all the users (acting simply as a dynamic update to the webpage). How does this work?
I'm looking forward for your answers, and thank you all in advance!!!
The click event needs to be handled by an AJAX request, sending a message to the server and the server will handle that and respond. Upon the response, the first type of event is executed for the user.
On server-side you will need to have an event queue somewhere, maybe in the database. If you are using WebSockets, then you will have to execute the second type of event for all users if the request is met via WebSocket channels. If you are not using WebSockets, you will need to do polling from the browser. Anyway, you will need a counter on the server-side to be able to determine when the second type of event is met.
EDIT
Yes, WebSockets are the way to go unless there is a strong reason not to do so, like a boss saying he or she does not want the server to use WebSockets. With WebSockets you have a live channel between the server and the client browsers. You can use this channel to send the URL change to the client. On the other hand, the client will have to handle the change with Javascript, gathering the tags where the src is to be changed and change them. If you happen to have a class of changable for all such tags, then executing the change can be done with a function like this:
function changeSources(newSrc) {
var items = document.getElementsByClassName("changable");
for (var index = 0; index < items.length; index++)
items[index].src = newSrc;
}
However, this change will be effectuated only for the loaded page which was initially loaded and upon new loads, this, by itself will not use the new src. So you will have to solve that problem as well. A neat way to do it is to store the new src on the server before you send it out to the client via WebSocket and use this stored src as the src of those tags when the client requests for the HTML. So, your problem has two parts, the first is changing the src on already loaded pages and the second is making the change permanent.
ReactJS is a Framework. At this point we need to define the technical background, since ReactJS will use a possible solution from these.
WebSocket
https://www.npmjs.com/package/react-websocket
This is a WebSocket implementation. The best technical background here is to use WebSockets unless there is a very good reason not to do so.
Server notification system
https://www.npmjs.com/package/react-notifications
Server notification systems in general are one-way ticket roads. The server may send a notification, but the client has no such possibility.
Polling
The browser may periodically send HTTP requests to the server and this way it can receive the src change response. This is a good solution if WebSockets and server notification systems are not an option.
Forever frame
You can use an invisible iframe to be loaded forever, which will provide you with the possibility of sending real-time messages from the server to the client, but this is very hacky.
The difference may be between a front end, running in the browser, or the mobile app, of each user, which is local, and the back end, where you can share data between all users.
This can be implemented by, for example, firebase. Here is an example: Firebase - Multiple users simultaneously updating same object using its old value
This does not mean, obviously, that back end data is always shared... In many cases each user accesses his own copy of back end data that is stored in a database.
I'm working on a project that uses IP Payments to process transactions. The project involves a web form written in ASP with Code-Behind written in C#.
IPP offers an iFrame implementation, where you can put an iFrame in your page and display a small IPP page with fields for entering credit card information. The idea behind this is that the credit card info will only be handled by IPP and never by the server running the page, thus there is no requirement to ensure that card data is kept secure.
In order to display the IPP page in the iFrame though, a session needs to be initiated with IPP. The server initiates the session, and passes in a SessionID variable. Upon a successful session initiation, a Secure Session Token is returned to the server. The server then needs to "force" the client's browser to GET or POST the SessionID and the SST (Secure Session Token) to the IPP website. This is where my problem is.
I wrote a Javascript function in the ASPX page that would accept two parameters - the SessionID and SST - and send them to the IPP website. I'm now trying to call this Javascript function from my C# code upon successful initiation of the IPP session. However, I have been completely unable to do so.
I've done a lot of searching, and the one answer I keep coming across is to use either RegisterStartupScript or RegisterClientScriptBlock. The problem is, these seem to insert text directly into the page, rather than calling an existing function. Assuming I inserted my function into the page via one of those functions rather than writing it into the page myself, it still doesn't solve my problem of how to call said function.
Now it is possible that I'm going about this the wrong way, and there's a much better way to get the client's browser to GET/POST the SessionID and SST; if so, please tell me. I'm inexperienced with web programming and am thus learning as I go and making up solutions along the way that are quite likely not ideal.
Thanks in advance.
I think this should work:
Lets say you have something like this in your HTML:
<html>
<head>
<script>
function sendValuesToIPP(sessionId, sst){
//do stuff
}
</script>
</head>
</html>
If you do this in your C# code it should work
ClientScriptManager.RegisterStartupScript(
this.Type,
"some_key_you_want_to_identify_it",
string.Format("sendValuesToIPP('{0}','{1}')", SessionID, SST),
true);
Keep in mind that I'm assuming you have SessionID and SST properties server side, you can get them from wherever you want and just add them to the string that will actually call the function when registered in your ASPX.
my problem is that I want to get access from page index1.html to object in page index2.html, for example:
<button id="btnIndex1" onclick="$('#PopUpDIvIdInPageIndex2').show();">btn in index1.html</button>
Solutions with coockies and another storages are not useful for me because I need immediately(real-time) access.
Any suggestions?
You can't just reference an element on another page. What would happen if you could just inject some code this way in a div on the open Facebook page from a user? That wouldn't be nice, huh.
The option you have in my opinion to make this semi-real-time is by using WebSockets. From page 1, send a request to the server. The server will send a request to page 2 to update something.
To learn more about WebSockets, read this tutorial on HTML5 Rocks.
For a simple task to load a page from a click event I would instead suggest an ajax-request.
This could simply be done with the javascript library jquery.
http://jquery.com/
Have a look at the jquery load method
http://api.jquery.com/load/
how can I simulate hyperlink.target="_parent" with response.redirect in ASP.NET codebehind (C#), I want to redirect to a page (from code behind) but as I'm in a 2-frame window, the whole page should be redirected, i.e. something like hyperlink.target="_parent", I suppose it should be possible via JavaScript, can you give some help please? I want something cross-browser of course
thanks
You can manipulate other frames/windows only on the client-side (through javascript, user interaction etc.)
Response.Redirect is a server-side construction; the server doesn't know anything about your frames and cannot perform the necessary action. The workaround could be to say the page to execute javascript code when it will be returned to the client.
So ClientScript.RegisterStartupScript method (you already mentioned it in your comment) could be the best option here.
I could just create a form and use that to do a POST request to any site, thing is the FORM method isn't asynchronous, I need to know when the page has finished loading. I tried messing around with this using an iframe with a form inside, but no success.
Any ideas?
EDIT
unfortunately I have no control over the response data, it varies from XML, json to simple text.
You can capture the onload event of an iframe. Target your form to the iframe and listen for the onload. You will not be able to access the contents of the iframe though, just the event.
Try something like this:
<iframe id='RS' name='RS' src='about:blank' onload='loaded()'></iframe>
<form action='wherever.php' target='RS' method='POST'>...</form>
script block:
var loadComplete = 0
function loaded() {
//avoid first onload
if(loadComplete==0) {
loadComplete=1
return()
}
alert("form has loaded")
}
IF you want to make cross domain requests you should either made a JSON call or use a serverside proxy. A serverside proxy is easy to set up, not sure why people avoid it so much. Set up rules in it so people can not use the proxy to request other things.
If the data returned from the cross domain post is JSON, then you can dynamically add a script tag pointing to the URI that returns the data. The browser will load that "script" which then you can access from other javascript.
YUI3's IO object offers cross-domain requests, however it does so using a small Flash control it embeds on the page.
While there is work going into secure cross-domain requests from JavaScript, at this time, you need to use a plugin like Flash or Silverlight as a bridge with which to make the request.
You can't do anything cross-domain using javascript. You'd have to use a backend language like PHP or asp or something.