Pass value to iframe from a window

Question

I need to send a value to an iframe   The iframe is present within the current window  How can I achieve this   I need to do it with javascript in the parent window that contains the iframe

User · Answer

Use the frames collection   From the link   var frames   window frames     or    var frames   window parent frames  for  var i   0  i  lt  frames length  i            do something with each subframe as frames i    frames i  document body style background    red       If the iframe has a name you may also do the following   window frames  ponies   number of ponies   7    You can only do this if the two pages are served from the same domain

User · Answer

Two more options  which are not the most elegant but probably easier to understand and implement  especially in case the data that the iframe needs from its parent is just a few vars  not complex objects   Using the URL Fragment Identifier      In the container    lt iframe name  frame-id  src  http   url to iframe dataToFrame  gt  lt  iframe gt    In the iFrame    lt script gt  var dataFromDocument   location hash replace           alert dataFromDocument     alerts  dataToFrame   lt  script gt    Use the iFrame s name   I don t like this solution - it s abusing the name attribute  but it s an option so I m mentioning it for the record   In the container    lt iframe name  dataToFrame  src  http   url to iframe  gt  lt  iframe gt    In the iFrame    lt script type  text javascript  gt  alert window name      alerts  dataToFrame   lt  script gt

User · Answer

Have a look at the link below  which suggests it is possible to alter the contents of an iFrame within your page with Javascript  although you are most likely to run into a few cross browser issues  If you can do this you can use the javascript in your page to add hidden dom elements to the iFrame containing your values  which the iFrame can read  Accessing the document inside an iFrame

User · Answer

Depends on your specific situation  but if the iframe can be deployed after the rest of the page s loading  you can simply use a query string  a la    lt iframe src  some page html somedata 5 amp more bacon  gt  lt  iframe gt    And then somewhere in some page html    lt script gt  var params   location href split      1  split   amp     data       for  x in params     data params x  split      0     params x  split      1       lt  script gt

User · Answer

What you have to do is to append the values as parameters in the iframe src  URL    E g   lt iframe src  some page php somedata 5 amp more bacon  gt  lt  iframe gt   And then in some page php file you use php   GET  somedata   to retrieve it from the iframe URL  NB  Iframes run as a separate browser window in your file

User · Answer

We can use  postMessage  concept for sending data to an underlying iframe from main window   you can checkout more about postMessage using this link add the below code inside main window page     main window code window frames  myFrame   contentWindow postMessage  Hello World       we will pass  Hello World   message to an iframe contentWindow with iframe id  myFrame    now add the below code inside iframe source code     iframe document code function receive event        console log  Received Message       event data     window addEventListener  message   receive     in iframe webpage we will attach an event listener to receive event and in  receive  callback  we will print the data to console

User · Answer

First  you need to understand that you have two documents  The frame and the container  which contains the frame    The main obstacle with manipulating the frame from the container is that the frame loads asynchronously  You can t simply access it any time  you must know when it has finished loading  So you need a trick  The usual solution is to use window parent in the frame to get  up   into the document which contains the iframe tag    Now you can call any method in the container document  This method can manipulate the frame  for example call some JavaScript in the frame with the parameters you need   To know when to call the method  you have two options    Call it from body onload of the frame  Put a script element as the last thing into the HTML content of the frame where you call the method of the container  left as an exercise for the reader     So the frame looks like this    lt script gt  function init     window parent setUpFrame    return true    function yourMethod arg           lt  script gt   lt body onload  init     gt     lt  body gt    And the container like this    lt script gt  function setUpFrame          var frame   window frames  frame-id        frame yourMethod  hello       lt  script gt   lt body gt  lt iframe name  frame-id  src       gt  lt  iframe gt  lt  body gt

User · Answer

Here s another solution  usable if the frames are from different domains    var frame     the iframe DOM object    frame contentWindow postMessage  call  sendValue   value    value       frame domain url or           And in the frame itself   window addEventListener  message   function event        var origin   event origin    event originalEvent origin     For Chrome  the origin property is in the event originalEvent object      if  origin       the container s domain url            return      if  typeof event data     object   amp  amp  event data call   sendValue                Do something with event data value           false     Don t know which browsers support this  though

User · Answer

Incase you re using angular and an iframe inside  you ll need need to listen to the iframe to finish loading  You can do something like this           document getElementsByTagName  quot iframe quot   0  addEventListener  load        gt                document getElementsByTagName  quot iframe quot   0  contentWindow postMessage                                        call   sendValue                       value   data                                     window location origin              You will have to get the iframe one way or another  there are better ways to do it in angular  and then wait for it to load  Or else the listener won t be attached to it even if you do it inside lifecycle methods like ngAfterViewInit

[javascript] Pass value to iframe from a window

Examples related to javascript

Examples related to html

Examples related to iframe