I have been having some trouble figuring out how to change the height attributes of an iframe (Embeded URL).
We are trying to deliver lessons via a custom made application so as to remove the need for endless PDF lesson plans in our course topic sections and rather offer them all in an html format. This is probably not the most effective way of delivering content to learners through moodle however it is the way I have been tasked with doing it. Below is an example of an embeded URL:
The issue I am having is that when I change tabs at the top of the embedded page - say to Video - if the height in the video tab is larger than the original iframe height then i end up having my footer controls etc run off the page as in the next image:
I have already made some modifications to the way moodle works with embedded url's to make changes to the iframe's border and scroll bar (All in an attempt to make the embedded URL seem as native to the moodle page as possible).
The edits I made were to path_to_moodle/lib/resourcelib.php and they were made to the attributes of the iframe generated when moodle embeds a URL on line 271. They were as follows:
function resourcelib_embed_general($fullurl, $title, $clicktoopen, $mimetype) {
global $CFG, $PAGE;
if ($fullurl instanceof moodle_url) {
$fullurl = $fullurl->out();
}
$param = '<param name="src" value="'.$fullurl.'" />';
// Always use iframe embedding because object tag does not work much,
// this is ok in HTML5.
$code = <<<EOT
<div class="resourcecontent resourcegeneral">
<iframe id="resourceobject" src="$fullurl" frameborder="0" scrolling="no" >
$clicktoopen
</iframe>
</div>
EOT;
// the size is hardcoded in the boject obove intentionally because it is adjusted by the following function on-the-fly
$PAGE->requires->js_init_call('M.util.init_maximised_embed', array('resourceobject'), true);
return $code;
}
My edits are in yellow.
The light green bit is what I understand calls the JS function which dynamically sets the height of the iframe.
I have tried changing the function in path_to_moodle/lib/javascript-static.js which is where I understand it is defined - this makes no changes to my iframe or page height attribute. An example of these changes:
M.util.init_maximised_embed = function(Y, id) {
var obj = Y.one('#'+id);
if (!obj) {
return;
}
var get_htmlelement_size = function(el, prop) {
if (Y.Lang.isString(el)) {
el = Y.one('#' + el);
}
// Ensure element exists.
if (el) {
var val = el.getStyle(prop);
if (val == 'auto') {
val = el.getComputedStyle(prop);
}
val = parseInt(val);
if (isNaN(val)) {
return 0;
}
return val;
} else {
return 0;
}
};
var resize_object = function() {
obj.setStyle('display', 'none');
var newwidth = get_htmlelement_size('maincontent', 'width') - 35;
if (newwidth > 500) {
obj.setStyle('width', newwidth + 'px');
} else {
obj.setStyle('width', '500px');
}
var headerheight = get_htmlelement_size('page-header', 'height');
var footerheight = get_htmlelement_size('page-footer', 'height');
var newheight = parseInt(Y.one('body').get('docHeight')) - footerheight - headerheight - 100;
if (newheight < 400) {
newheight = 400;
}
obj.setStyle('height', newheight + 400 + 'px');
obj.setStyle('display', '');
};
Changes again in yellow.
If I comment out the green line from above and hard code a height attribute into the iframe element then it DOES follow my inline styling, however if I un-comment the green and leave my inline styling then the inline styling is ignored (or overwritten). SO it seems this function M.util.init_maximised_embed is definitely making changes.
I would love to find a solution that would allow for an iframe to change size dynamically whenever something in the embedded page changed - however looking into this brought me across various issues including cross domain scripting.
So a potential workaround would be for me to set the height of the original iframe to a set amount larger than the content within (not the best solution, but one that would work for now).
The problem I face is that nothing I did to the JS would change the way an iframe was sized except for adding an inline height attribute in the yellow section and commenting out the green section - however this is the most static option available - I would prefer to have the JS (green) to calculate a relative size and then add a buffer of say 400px to this.
Does anybody have any advice on how that JS function called by the green line works and why changes to the function don't seem to affect changes on the page?
I am running moodle 3.2.