OnChange Event foriFrame on HTML with Onload Event

Question

I have SAP system where I can integrate HTML page. This HTML page is launched on Button Click.

Button click changes the value of Iframe source every time. As I understand the basic, I wrote the below code which is working fine on the first click. The HTML page gets loaded.

<!DOCTYPE html> <html> <body onLoad="myFunction()"> <iframe id="myFrame" src="http://www.w3schools.com/" height="1000" width="2000" frameborder="0"></iframe> <script> function myFunction() { document.getElementById("myFrame").src = sap.byd.ui.mashup.context.inport.FirstName; } </script> </body> </html>

When I click second time the value for sap.byd.ui.mashup.context.inport.FirstName changes, but there is no change in the Iframe.

I saw there is something called onChange event, but I am not able to write use it correctly. Can anyone help me to do this?

There is no buttons in that code. You are just calling your function on body onload which would only run once. — Ozan
– Ozan, Commented Aug 11, 2016 at 20:25
@Ozan : Button is in SAP system which changes the value of ` sap.byd.ui.mashup.context.inport.FirstName`. this part is Integrated in SAP system. — GameBuilder
– GameBuilder, Commented Aug 11, 2016 at 20:31
Here, in your code, what changes the src of the iframe is myFunction(). And that gets called on body onload, which would only run once for an html page. Once you assing the value of sap.byd.ui.mashup.context.inport.FirstName to iframe.src, changing FirstName will not effect iframe.src; You need to call myFunction() again after changing Firstname to change iframe.src — Ozan
– Ozan, Commented Aug 11, 2016 at 20:36
That would mainly be a question about SAP, not javascript. I don't have the slightest clue how it communicates with javascript. Do you have a way to call a javascript function from SAP? Your problem does not lie within the html/js code you wrote but within the SAP code that you omitted. — Ozan
– Ozan, Commented Aug 11, 2016 at 20:45

Ozan · Accepted Answer · 2016-08-11 21:02:53Z

An ugly solution would be to constantly check if the value of the FirstName, in order to check for changes.

<script> var _firstname; function myFunction() { document.getElementById("myFrame").src = sap.byd.ui.mashup.context.inport.FirstName; _firstname = sap.byd.ui.mashup.context.inport.FirstName; } setInterval(function() { if (_firstname != sap.byd.ui.mashup.context.inport.FirstName) myFunction(); }, 1000) //check every second to see if FirstName value changed </script>

But I would definitely recommend calling myFunction() from wherever you change sap.byd.ui.mashup.context.inport.FirstName to avoid the use of setInterval. If you can change the value of a javascript object, you should be able to make a function call too. I suggest you research how to call a javascript function and just call myFunction() right after you change FirstName. Then you will not need the setInterval.

Collectives™ on Stack Overflow

OnChange Event foriFrame on HTML with Onload Event

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related