CODEWITHSUNDEEP
javascriptjqueryiframe
Saeid
Saeid

Reputation: 448

How to change Iframe width inside an iframe?

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");

Upvotes: 0

Views: 57

Answers (2)

Jamie McElwain
Jamie McElwain

Reputation: 462

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'

Upvotes: 1

tetta
tetta

Reputation: 445

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.

Upvotes: 0

Related Questions