EDUCATIC
/
h5p-php-library
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fixed resizing script trying to access iframe content 

HFJ-1512
pull/17/head
Frode Petterson 2016-01-05 13:57:16 +01:00
parent 5e45e7d7dd
commit 59901fd1c9
2 changed files with 17 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
js/h5p-resizer.js
View File

@ -19,7 +19,6 @@
actionHandlers.hello = function (iframe, data, respond) { actionHandlers.hello = function (iframe, data, respond) {
// Make iframe responsive // Make iframe responsive
iframe.style.width = '100%'; iframe.style.width = '100%';
iframe.contentDocument.body.style.height = 'auto';
// Tell iframe that it needs to resize when our window resizes // Tell iframe that it needs to resize when our window resizes
var resize = function (event) { var resize = function (event) {
@ -47,7 +46,14 @@
* @param {Function} respond Send a response to the iframe * @param {Function} respond Send a response to the iframe
*/ */
actionHandlers.prepareResize = function (iframe, data, respond) { actionHandlers.prepareResize = function (iframe, data, respond) {
respond('resizePrepared'); // Do not resize unless page and scrolling differs
if (iframe.clientHeight !== data.scrollHeight ||
data.scrollHeight !== data.clientHeight) {
// Reset iframe height, in case content has shrinked.
iframe.style.height = data.clientHeight + 'px';
respond('resizePrepared');
}
}; };
/** /**
@ -59,16 +65,8 @@
* @param {Function} respond Send a response to the iframe * @param {Function} respond Send a response to the iframe
*/ */
actionHandlers.resize = function (iframe, data, respond) { actionHandlers.resize = function (iframe, data, respond) {
if (iframe.clientHeight === iframe.contentDocument.body.scrollHeight &&
iframe.contentDocument.body.scrollHeight === iframe.contentWindow.document.body.clientHeight) {
return; // Do not resize unless page and scrolling differs
}
// Reset iframe height, in case content has shrinked.
iframe.style.height = iframe.contentWindow.document.body.clientHeight + 'px';
// Resize iframe so all content is visible. Use scrollHeight to make sure we get everything // Resize iframe so all content is visible. Use scrollHeight to make sure we get everything
iframe.style.height = iframe.contentDocument.body.scrollHeight + 'px'; iframe.style.height = data.scrollHeight + 'px';
}; };
/** /**

10
js/h5p.js
View File

@ -279,6 +279,9 @@ H5P.init = function (target) {
// Initial setup/handshake is done // Initial setup/handshake is done
parentIsFriendly = true; parentIsFriendly = true;
// Make iframe responsive
document.body.style.height = 'auto';
// Hide scrollbars for correct size // Hide scrollbars for correct size
document.body.style.overflow = 'hidden'; document.body.style.overflow = 'hidden';
@ -289,7 +292,7 @@ H5P.init = function (target) {
// When resize has been prepared tell parent window to resize // When resize has been prepared tell parent window to resize
H5P.communicator.on('resizePrepared', function (data) { H5P.communicator.on('resizePrepared', function (data) {
H5P.communicator.send('resize', { H5P.communicator.send('resize', {
height: document.body.scrollHeight scrollHeight: document.body.scrollHeight
}); });
}); });
@ -307,7 +310,10 @@ H5P.init = function (target) {
resizeDelay = setTimeout(function () { resizeDelay = setTimeout(function () {
// Only resize if the iframe can be resized // Only resize if the iframe can be resized
if (parentIsFriendly) { if (parentIsFriendly) {
H5P.communicator.send('prepareResize'); H5P.communicator.send('prepareResize', {
scrollHeight: document.body.scrollHeight,
clientHeight: document.body.clientHeight
});
} }
else { else {
H5P.communicator.send('hello'); H5P.communicator.send('hello');