How to use <iframe> with gchem content

Here is a help page (step-by-step) on how to use the html tag <iframe>....<iframe> on external websites (like a Canvas quiz or page). The method described removes the menus and header of the gchem site and only shows the content.

Step 1

Browse the gchem website and find the page you want to show in your external page. Copy the entire URL from your browser's nav bar. For my example I will use the page on the Clausius-Clapeyron Equation in chapter 7, section 2 from gchem. Here is the fully copied URL:

https://gchem.cm.utexas.edu/physEQ/index.php#vapor/cc-equation.html


Step 2

Delete the #index.php (shown in purple) out of the URL to get:

https://gchem.cm.utexas.edu/physEQ/vapor/cc-equation.html

You might be tempted to use that… don’t because it is not styled and any and all formulas will not render correctly (click above and see what I mean). It needs styling and MathJax installed – which is what the canvas.php script will do for you.


Step 3

Here is what you DO use. You are going to insert. canvas.php?target= into that URL like this:

https://gchem.cm.utexas.edu/canvas.php?target=physEQ/vapor/cc-equation.html

Click on that and notice the difference. Looks a LOT better (like gchem without the menus)

Now you’ve got:

<iframe src=”https://gchem.cm.utexas.edu/canvas.php?target=physEQ/vapor/cc-equation.html”></iframe>


Step 4

That works too but the sizing will be the default that canvas uses – which is really small.

To fix that you will add width=”100%” and height=”400”

<iframe src=”https://gchem.cm.utexas.edu/canvas.php?target=physEQ/vapor/cc-equation.html” width=”100%” height=”400”></iframe>


You can play around with the width and height sizing. The 100% width uses all the width canvas is willing to give. The height is in pixels generally. If it is a long passage beyond your number there, you will get that size view window with a scroll bar on the right side. Sometimes I’ll decide the scrolling is just too little to be worth the smaller window size and I’ll change it to like 800, or 1200 or whatever. Once you are past the actual viewing size, the scroll bar vanishes. Too big a number will leave you with lots of white space. So try to get it right or just allow scrolling.

That is it. This will work with pretty much any external website. Good luck and let me know if there are any issues to address here. Happy coding.

- Paul