0

I have an iframe that loads my own payment form, when it is sent the response from the endpoint are some buttons with the payment methods, the problem is that it occupies less than the height of the iframe and it generated a white background in the space that surplus. The code would look like this:

 <iframe id="myIframe" title="Form" src="index2.php"style="max-width:570px;border-style:none;min-height:100px;height:750px;" allowtransparency="true"></iframe>

With the chrome inspector mode I entered the iframe code and manually entered allowtransparency="true" when the payment methods are already loaded and the background is removed, the problem is that this does not work when you put it from the code, the new content loaded ignores this attribute.

Any way to force transparent background? Thank you

1 Answers1

0

You need to utilize JavaScript for this.
See this question for reference.

Lior Pollak
  • 3,362
  • 5
  • 27
  • 48
  • so I can't change the style of an iframe that loads something outside my web, as it is another url, because of CORS? i mean, is not changing what is loading the iframe, is the background covering the height not used by the iframe (can be a external css rule anyway) – lekordicosadiluy May 19 '22 at 11:49
  • If the iframe is served from another source, you can’t touch- it’s quite understandable from a security perspective. If it’s served from your origin, you need to write some JavaScript. – Lior Pollak May 19 '22 at 11:52
  • 1
    You need to differentiate between the iframe _content_, and the iframe _element_. You can not "reach into" the iframe and read or manipulate its content, when it was loaded from a different origin. But the `iframe` _element_ inside your document, is still yours to do with as you please - like for example, manipulate its styling. But we can't currently tell what the actual problem with this is supposed to be, _"the problem is that this does not work when you put it from the code"_ is too vague as a problem description. – CBroe May 19 '22 at 12:12