identify frame in javascript

Hello Gentlemen,
I have implemented voice command in a system and the following problem or difficulties appeared :
Note - My operating system is windows 10 and browser edge

  1. Environment
    The application has a menu where it presents the processing alternatives to
    the user. This menu is displayed 4 frames namely :
  • Data base
  • Database entities
  • Entity data
  • System Legend

For example :

  • The user activates the database option and the system provides:
    business group
    group companies
    branches of companies , etc.
  • The user activates the group companies option and the system provides a
    form with the operations include, exclude, consult companies in the system.
  • The caption option is common to all system operations so it is fixed where
    the system provides mainly internal communication functions: Manual of rules and procedures, Organization Manual, Online Meeting Rooms, Video Conference Rooms, Contract Templates, etc.
    Note - I centered the voice command on this frame because it is resident (does not change)
    There are some functions in the system caption that I need to set another frame in a system start frame.
    For example, in the entity data frame I redefine it with 2 other frames that contain menu and contract.
    This procedure, from the internet research I conducted, people call it
    cross-frame.
  1. the problem
    I need to access the functions of the document loaded in the contract frame
    through the original frame caption , to implement procedures from a voice command.
    Problem is, I don’t have access to this frame.
    By searching the internet, it seemed to me more feasible to identify it through
    a list of windows frame and from this point on.
    var frames = window.parent.frames;
    for (var i = 0; i < frames.length; i++) {
    if ( frames[i] === “contract” ) {
    parent.frames[i].enter(textovoice);
    }
    }
    How do I identify the ‘frame name’ attribute for select it ?
    Once again thank you for your attention.
    Note - This text was translated by google

The most reliable way to call functions between iframes is use the window.postMessage API.
You can then add an eventListener for the message event like:

window.addEventListener("message", (event) => {
  if (event.origin !== "https://example.com/home") return;
  switch(event.message){
  case 'log': console.log('message received');
  break;
  case 'call function': doSomething();
  break;
  }
}, false);

and be able to call functions in any frame…
or you could use eval() or newFunction() to run the message string but that would be an XSS risk.

If you are want to reference the frames and you don’t know what order they are opened you could create an array to track the window.frames position of the frame you want. e.g.

framePos = [];
let dataBase = ‘db.html’;
let databaseEntities = ‘dbent.html’;
let entityData = ‘entdata.html’;
let systemLegend = ‘sysleg.html’

window.open(dataBase);
framePos.push(dataBase);

then you could use framePos.indexOf(dataBase) to reference the frame when using the postMessage(). e.g.

const messageOut = function(target, message){
let pos = framePos.indexOf(target);
let currentFrame = window.frames[pos];
currentFrame.postMessage(message);
}
messageOut(dataBase, 'call function');

Obviously if you close the iframe you would have to splice() the frame name from framePos to avoid messing up the order and you would want make it impossible to double open an iframe.

There might be better ways of doing this and I cant say that I have done this exact thing but if I was doing it, I would try it this way.

1 Like

Hello Gentlemen,
Thank you for the kindness of mr Steve.mills in replying.
I spent the weekend researching this topic on the internet
and I concluded that the best solution is not to use cross-frames.
I’m going to change the 5 functions that use this method.

Thank you for your kindness ,

Kleber

Note - This text was translated by google

1 Like