Can't use window.parent.frames in my iframes

[FlorianBurgevin]

Hello,

I am building an application with iframes inside that need to communicate with each other.

In my iframe, i try to send a post message to all siblings iframes via this function:

for (let f = 0; f < window.parent.frames.length; f++) {
  let frame = window.parent.frames[f];

  try {
    if (frame.location.href.startsWith('MY_FRAME_URL') {
        frame.postMessage(
          JSON.stringify({
            message: my_message
          }),
         MY_FRAME_URL
        );
    }
  } catch (e) {
    /* ignored */
    // If error, the iframe is not a sibling, so do not send anything
  }

The problem is that window.parent.frames.length is equal to 0 and so others iframes do not received the postMessage and my app does not work.

There is no problem with this integration in classic browsers.

Can someone help me ?

Thanks

I have the same problem trying to compare window.parent & window.self. It always return true while i'm executing it in my iframe.

if (window.self !== window.parent) {}

[jennifer-shehane]

When applications are run within Cypress, they are run within an iframe and Cypress has had to make some modifications in order for this to work well for most applications, yet this does sometimes cause issues with applications that rely heavily on iframes.

Some of this is done under the modifyObstructiveCode setting: https://on.cypress.io/configuration#modifyObstructiveCode

Having this work for you may actually mean you'll need to update some of your app code, to check if you app is running within Cypress.

[FlorianBurgevin]

Ok thanks!
My app is running in Cypress with the modifyObstructiveCode option set to false.

I noticed that my test with window is different than with global

global.self !== global.top  // true
window.self !== window.top  // false

Should i use global instead of window in my code in order my app to work with modifyObstructiveCode to true ?

Or is there another way to deal with postMessages and iframes communication ?

[FlorianBurgevin]

After some tests i found something i don't understand.

If i call directly window.parent.frames, it's not working.
But when i pass it to a function and access it after it is working.

Do you know what happened ?

function sendMessage(frame, message, origin) {
  console.log(frame.name + ' - ' + frame.frames.length);    // test-frame - 5
  console.log(frame.frames[0]);   // Window(...)
}

Bus.prototype.dispatchToControllerFrame = function(type, message) {
  console.log(window.parent.name + ' - ' + window.parent.frames.length);   // test-frame - 0
  console.log(window.parent.frames[0]);  // undefined

  sendMessage(window.parent,message,target);
}

EDIT:
If i store window.parent in a variable and access frames it's working too

  let test = window.parent;
  console.log(test.frames.length);  // 5
  console.log(window.parent.frames.length);  // 0

[aldocd4]

When applications are run within Cypress, they are run within an iframe and Cypress has had to make some modifications in order for this to work well for most applications, yet this does sometimes cause issues with applications that rely heavily on iframes.

Some of this is done under the modifyObstructiveCode setting: https://on.cypress.io/configuration#modifyObstructiveCode

Having this work for you may actually mean you'll need to update some of your app code, to check if you app is running within Cypress.

Thanks, setting this key to false fixed the problem for me.

Cypress was replacing window.parent by window.self.

[mali313]

@FlorianBurgevin have you solved this issue i am also trying to send postmessage to but they are not coming

[cypress-bot]

The code for this is done in cypress-io/cypress#5273, but has yet to be released.
We'll update this issue and reference the changelog when it's released.

[cypress-bot]

Released in 4.6.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v4.6.0, please open a new issue.

[flotwig]

This fix is available starting in 4.6.0 as an experiment which you can access by setting this config option in your cypress.json or elsewhere:

{
	"experimentalSourceRewriting": true
}

The fix is experimental, so there may be some situations where this is not fixed.

If you're still this issue while setting the experimentalSourceRewriting to true in 4.6.0 - open a new issue with a reproducible example + screenshots, etc - filling out our issue template.

[swetaGabani007]

I am having an issue, in my cypress test it is replacing window.parent by window.self in the lower environment and the test passes. but in the staging environment, it couldn't change it because of the minified js file.

[AlexanderTunick]

modifyObstructiveCode: false helped to resolve an issue that we were tripping over for almost 2 days. We have a piece of code in the iFrame and there is some logic. And before we found this github issue and couldn't understand why one our request is not sent in Cypress Iframe and why console.log from our application is not outputted in the Cypress console.log. As stated above by aldocd4:

Cypress was replacing window.parent by window.self.

It's not described in Cypress documentation and may heavily drain your mood with the feeling of uncertainty for some time if you encounter this problem in your tests

[abhiskkk-mp]

My AUT is also facing the same issue and even after using the modifyObstructiveCode: false the issue is not resolved. Instead the application is crashing & the executor is returning back to the /specs selection page.
If I don't use the modifyObstructiveCode then at least the application is loading but not loading one of the frame showing the navigation bar. Please suggest how can this is handled in Cypress.

Thanks

[jennifer-shehane]

@abhiskkk-mp Please open a new issue if you're seeing this behavior as this exact issue was fixed.