Question 43139 in Html Question posted in
Some basic documentation can be found here.

How can I make an iframe that fits the size of its content? – Html

what happens is that I have an iframe that brings results from a link, the width of the iframe will always be the same, but depending on the number of results the height of the iframe varies, so I would like to know how I can do to adjust the size of the iframe each time the results are displayed without having a scroll.

Tags:

2

Answers


  1. 0

    You didn’t provide source code and it’s difficult to realize what’s your problem.

    However try this solution to make the iframe take the width and height of your browser.

    ex :

    css :

            html,body{
            width:100%;
            height:100vh;
            overflow:hidden;
            margin:0px;
            padding:0px;
            border:none;
        }
        iframe{
            width:100%;
            height:100vh;
            overflow:hidden;
            margin:0px;
            padding:0px;
            border:none;
        }

    Html :

            <iframe src="https://blogger.com" name="otherSite"></iframe>

    You have to do a copy and paste of the code because it cannot run in a snippet.

    Login or Signup to reply.
  2. 0

    An iframe cannot set its own size, it is determined and controlled by the parent window. This is particularly important because an iframe’s source may be part of another domain. It would be a security risk to allow an external domain to control our domain. Read the postMessage documentation carefully to ensure proper message handling between frames –

    parent.html

    <html>
  <head>
    <script>
      // when message is received … 
      // if it is from our trusted origin …
      // and the message is an object …
      // and the message type is "resize" …
      // then resize the iframe 
      window.addEventListener("message", event => {
        if (event.origin != "http://example.org") return
        if (typeof event.data != "object") return
        if (event.data.type != "resize") return
        const iframe = window.frames.myframe 
        iframe.setAttribute("width", event.data.width)
        iframe.setAttribute("height", event.data.height)
      })
    </script>
  </head>
  <body>
    my content…
    <iframe name="myframe" src="/myframe.html" />
  </body>
</html>

    myframe.html

    <html>
  <head>
    <script>
      // sendSize function
      // get the width and height of the document
      // and post the values to the parent frame
      function sendSize() {
        window.parent.postMessage(
          {
            type: "resize",
            width: document.documentElement.scrollWidth,
            height: document.documentElement.scrollHeight
          },
          "http://example.org"
        )
      }

      // when this window loads or resizes …
      // call our sendSize function
      window.addEventListener("load", sendSize)
      window.addEventListener("resize", sendSize)
    <script>
  </head>
  <body>
    …
  </body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search