Skip to content

Instantly share code, notes, and snippets.

@markhowellsmead
Forked from wlarch/iframe.js
Created September 30, 2021 08:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save markhowellsmead/9e509f84a57934889cb7b50374c100dc to your computer and use it in GitHub Desktop.
Save markhowellsmead/9e509f84a57934889cb7b50374c100dc to your computer and use it in GitHub Desktop.
Overwrite/bypass <iframe></iframe> height limit imposed by Wordpress
/**
* Overwrite/bypass <iframe></iframe> height limit imposed by Wordpress
* Original idea from bypass-iframe-height-limit plugin by Justin Carboneau
* Adapted from original /wp-includes/js/wp-embed.js
*/
(function(window, document) {
'use strict';
var supportedBrowser = false;
// Verify if browser is supported
if (document.querySelector) {
if (window.addEventListener) {
supportedBrowser = true;
}
}
/** @namespace owihl */
window.owihl = window.owihl || {};
if (!!window.owihl.OverwriteIframeHeightLimit) {
return;
}
window.owihl.OverwriteIframeHeightLimit = function(e) {
var data = e.data;
// Check if all needed data is provided
if (!(data.secret || data.message || data.value)) {
return;
}
// Check if data secret is alphanumeric
if (/[^a-zA-Z0-9]/.test(data.secret)) {
return;
}
// Select all iframes
var iframes = document.querySelectorAll('iframe[data-secret="' + data.secret + '"]'),
i, source;
for (i = 0; i < iframes.length; i++) {
source = iframes[i];
if (e.source !== source.contentWindow) {
continue;
}
if ('height' === data.message) {
// wp-embed.js clears any added inline styls, that's why we need to create a style element
var styleElem = document.getElementById('owihl-style-' + source.getAttribute('data-secret'));
var css = 'iframe.wp-embedded-content[data-secret="' + source.getAttribute('data-secret') +
'"] { height: ' + parseInt(data.value, 10) + 'px; }';
if (styleElem) {
styleElem.innerHTML = css;
} else {
var head = document.head || document.getElementsByTagName('head')[0],
style = document.createElement('style');
style.type = 'text/css';
style.id = 'owihl-style-' + source.getAttribute('data-secret');
style.appendChild(document.createTextNode(css));
head.appendChild(style);
}
}
}
};
if (supportedBrowser) {
window.addEventListener('message', window.owihl.OverwriteIframeHeightLimit, false);
} else {
console.log('Wordpress <iframe> limit is still present because the browser is not supported.');
console.log('For more information : https://medium.com/@wlarch/overwrite-and-bypass-wordpress-iframe-height-dimension-limit-using-javascript-9d5035c89e37');
}
})(window, document);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment