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, Aug 11 '16 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, Aug 11 '16 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, Aug 11 '16 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, Aug 11 '16 at 20:45
@Ozan : I am sure it can be handled in HTML Java script. SAP has nothing to do with it. SAP is just a 3rd Party tool . See the below link which may have solution to my problem. http://stackoverflow.com/questions/9787250/how-do-i-dynamically-set-source-of-an-iframe?noredirect=1&lq=1 — GameBuilder, Aug 11 '16 at 20:47
How does the `sap.byd.ui.mashup.context.inport.FirstName` change its value? **Wherever you change that value is wherever you need to call your function**. I assumed its value is changed in SAP since its not changed in your html code. — Ozan, Aug 11 '16 at 20:50
@Ozan : the value is coming from SAP through `sap.byd.ui.mashup.context.inport.FirstName` this Inport. If the `iframe` cannot be refreshed after changing the value , then the alternative solution will be creating `Modal Dialog box` an put the iFrame inside this. When i will click first time ,Modal Dialog will open and Iframe will get Loaded. Then offcource i have to close the Modal Dialog box , to click second time. Everytime i close MD box and click button , Iframe will be loaded inside it. — GameBuilder, Aug 11 '16 at 20:59

Ozan · Answer 1 · 2016-08-11T21:02:53.760

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.

OnChange Event foriFrame on HTML with Onload Event

1 Answers1