how to get an iframe to resize according to its content

  • I’m on my fifth attempt to get an iframe to resize according to its contents but coming up short every time. Does anyone have a working solution for this?

    Currently working with https://iframe-resizer.com/ but does not seem to work any better than the other solutions I tried.

    Here’s the code I’m using on the parent page:

    <iframe id="myIframe" src="https://george-mainemonitor.github.io/my-reps/" style="width: 100%;height: 100vh;border:none;"></iframe>

    <script src="/wp-admin/js/iframe-resizer.parent.js"></script>
    <script>
      iframeResize({ license: 'GPLv3', waitForLoad: true }, '#myIframe');
    </script>

    Have triple checked this against the documentation at https://iframe-resizer.com/ and looked in my browser console but can’t seem to figure out what’s going wrong.

    Appreciate any advice or help with this.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

  • You have apparently placed a file called “iframe-resizer.parent.js” in the WordPress core directory wp-admin. I would strongly advise you not to do this.

    If you want to include individual JavaScript files, you need to do this with an individual plugin or child theme. There you can use the function https://developer.www.ads-software.com/reference/functions/wp_enqueue_script/ to include the file (examples can be found in the linked manual).

    To answer your question: in the JavaScript console you can see that the script you are using is obviously missing a script that it needs to work. I don’t know where you got this from, but it seems to be incompletely configured.

    In general, however, I would say that this kind of influencing the content of iframes is not feasible. If so, then only with extremely complex JavaScript, which is prone to errors. I would recommend that you look for other solutions for this.

    Thread Starter Megunticook

    (@megunticook)

    @threadi thanks for chiming in; you suggest looking for “other solutions.” Can you recommend any? Thanks.

    I double-checked and the link to the script in the child page loaded inside the iframe is present and the correct link. No idea why the browser console is reporting “The iframe (myIframe) has not responded within 5 seconds. Check @iframe-resizer/child package has been loaded in the iframe.”

    • This reply was modified 2 months, 1 week ago by Megunticook.

    Alternatives depend heavily on what kind of data is involved. To integrate external data into a website, you are more likely to use an API nowadays. This can be an interface for querying the external site or a simple XML file that provides it (e.g. in RSS format). Depending on the data structures involved, individual programming is required.

    However, this gives you the chance to obtain the data to be displayed and then make it available to your own visitors in your own style without a connection to external servers.

    The requirement is, of course, that the external site allows this. You would have to clarify this with them.

    Thread Starter Megunticook

    (@megunticook)

    Sounds like API is the way to go here. The purpose of all this is to let folks easily look up who their elected representatives are by punching in their address. I bet if I dig around I can find something that can do this and uses an API integration.

    Thanks for chiming in. It sure seems like this issue of trying to resize and iframe dynamically based on content has vexxed developers for many years. None of the “solutions” I found actually worked.

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.