如何更改iframe中的iframe宽度？

Question

I have an Iframe inside a webpage that contains a child Iframe . I want to change child iframe width using jquery . Note that inner iframe doesnt have id. how can i do that ? (both iframes are from my domain)

Thankyou very much

<Iframe id="iframeDoc ">
   // some codes
  <Iframe>
   // another page codes

  </Iframe>
</Iframe>

I have tried these codes but no one did work!

$('#iframeDoc > iframe').width("400px");

$('#iframeDoc iframe').width("400px");

$('#iframeDoc').contents().find("iframe").width("400px");

Answer 1

You could use contentWindow to select the nested iframe:

let pageiFrame = document.getElementById('iframeDoc')
let nestediFrame = pageiFrame.contentWindow.document.getElementBySelector('iframe')

pageiFrame.style.width = '400px'
nestediFrame.style.width = '400px'

Answer 2

If your iframe lies on a different domain - this can be useful.

Try to look into Window.postMessage() method. You can use it inside your iframe and window.addEventListener('message', messageHandlerFn) outside.

But it suitable only in case when you have possibility to modify sources outside iframe.