WordPress for LMS iFrame Infiltration

Origin Story

Over the years I’ve seen a number of people embedding WordPress within the LMS using iframes. There are lots of reasons to do this but it’s not something that WordPress is really meant to do. You end up with an odd feeling as it’s a website within a website and many things feel out of place (headers, footers, sidebars). I said something on Twitter one time that I might make a theme that would behave better in those kinds of scenarios. I was able to find that tweet using Twitter’s semi-hidden advanced search. Note that Sept. 9, 2018 date. It’s been a while but here’s a super simple theme that tries to play well in the land of iframe embeds.

Show Only What You Want

As is my pattern, I figured I could hide most of the extra things through javascript and use the URL’s query string parameters1 as the way to decide what was shown.

I haven’t built out all the various parameters but for this theme, I added some javascript to look at the URL for a ‘show’ parameter. So https://baseurl.com/some-page/?show=article will show only the

tag for this theme. You can see how it pretty radically changes the way the page looks below.

Now if we embed that URL in an iframe, we’ll see the clean version. That opens up an amazing amount of flexibility.

Here’s the brute force javascript that does that. It has three parts. Part one gets the value from the URL. Part two gets all the pieces of the page via the IDs. Part three adds a class named hidden to the various components. In a future iteration, we could get much fancier and add/remove elements from an array but I figured this would be easier to understand for people looking to learn this stuff.2

        //GET THE URL VALUE - PART ONE
        const urlParams = new URLSearchParams(window.location.search);
	const show = urlParams.get('show');
        
        //GET THE PAGE COMPONENTS - PART TWO
	const headerNav = document.getElementById('wrapper-navbar');
	const rightSidebar = document.getElementById('right-sidebar');
	const footer = document.getElementById('wrapper-footer');
	const adminBar = document.getElementById('wpadminbar');
	const privacy = document.getElementById('private');
	const primary = document.getElementById('primary');

        //HIDE CERTAIN PIECES DEPENDING ON THE URL VALUE - PART THREE
	if (show === 'article') {
		headerNav.classList.add('hidden');
		rightSidebar.classList.add('hidden');
		footer.classList.add('hidden');
		adminBar.classList.add('hidden');	
		privacy.classList.add('hidden');
		primary.removeAttribute("class");
		primary.classList.add('col-md-12 content-area')
	}

iFrame Sizing

This is where things get more complex. I was hoping to avoid people having to hand-set any iframe values (height, width etc.). I’ve looked at this before and it’s messy. This time around I found a GitHub page that offered a variety of ways to solve the cross-domain iframe height problem.

The Dual Javascript Path

The method I went with the first time relied on two javascripts. This works great if your LMS doesn’t strip script tags. Our Blackboard install doesn’t strip these tags. So an embed code set something like what you see below does a great job.

<iframe frameborder='0' scrolling='no' width='100%'src='http://192.168.33.10/wordpress/minimal/for-a-title/?show=article'></iframe>
<script async src='https://rampages.us/extras/js/set-iframe-height-parent-min.js'></script>

That method gets us something nice and clean like the screenshot below in anything that doesn’t strip out script tags.
Screen Shot 2019-05-09 at 9.36.03 AM

When I moved to our Canvas test install I found the filtering there to be much more aggressive. No script tags and a variety of other things I messed with in the iframe itself were stripped- including the scrolling parameter. I tried something slightly different in this case. I knew I could get the height of the element via javascript. I could add that into the iframe element and build the embed code on the fly. If I set it as the min-height via the style element it sort of works but things get messy again on mobile views etc. I’m still think about this but given Jeff was working on a twelve minute plugin that would use the Canvas API to allow WordPress to publish directly to Canvas I may not spend a huge amount of time on this.

let main = document.getElementById('primary');
let iframeHeight = main.clientHeight;

That works and results in an iframe code like you see below. I just let the LMS editor clean it up as it desires rather than creating two different patterns.

<iframe frameborder='0' scrolling='no' width='100%' style='min-height:632px;' src='http://192.168.33.10/wordpress/minimal/for-a-title/?show=article'></iframe><script async src='https://rampages.us/extras/js/set-iframe-height-parent-min.js'></script>

Next Steps?

This was about an hour’s worth of work when I wanted a break from a variety of other projects I’d been working on. I am still kind of interested in how this might work (mainly the iframe portion) but future effort will likely depend on some sort of additional interest from someone. If I don’t see that then I’ll likely put this in my back pocket3 I’m confident a number of the concepts will come back around in the future.

Aside>
Screen Shot 2019-05-09 at 9.37.55 AM
You may note that my Blackboard HTML editor looks like an old school terminal. This was actually done in response to a faculty member with failing vision who asked if something like that was possible. I did it for a demo and it amused me so I left it on. It uses Stylebot and the following CSS>

#htmlSource {
    background-color: #000;
    color: green;
    font-size: 1.5em;
}

.contentList {
    background-color: #424242;
}

1 It’s a trail! Go see what these are if you don’t already know.

2 And it documents how I build this stuff. I start with the easier version and then work towards more complexity as needed.

3 . . . with 12 to 15 thousand other things . . . some gum and some lint.