In the last paragraph of my And how… post I mentioned using iframes to display something from another web site embedded inside this one. Here’s a sample of what this might look like, although in actual use you’d hide the red border. Here I display it so we can see the dimensions of the iframe and where it’s positioned on the page.
The trick to embedding an iframe like this inside a WordPress post is to note the Visual and Text tabs at the right end of the WordPress editing window. The Visual tab lets you edit a post using what-you-see-is-what-you-get tools. The Text tab lets you edit a post using HTML.
I wrote most of this post in the Visual tab, then switched to the Text tab to add this bit of HTML after the first paragraph:
<iframe src="http://dev.open-meta.org/site/iframeDemo"
style="border: 2px solid red; width: 100%; height: 500px;">
It looks like your browser doesn't support iframes.
</iframe>
This HTML opens an iframe and then provides a link to the web page that goes inside. If there’s a problem, the message you provide (here, It looks like your browser doesn’t support iframes.) will be displayed instead of the embedded web page. In this case that page is a demo running on Open-Meta’s LEMRS server Amazon Web Services. You can see how the page looks outside of WordPress at http://dev.open-meta.org/site/iframeDemo.
The style part of the iframe HTML sets the frame size and the border. To hide the border use border: none;. Setting the height to a percentage will not do what you expect unless you’re a CSS coding ninja. Stick with pixels (px).
There is also a javascript project on github called iframe-resizer that enables the height and width of iframes to fit their contained content. I’ll write more about it when I understand it better. There’s also a post with explicit instructions for using iframe-resizer with shiny in the Shiny – Web Framework for R Google Group.