Last active
July 1, 2024 17:52
-
-
Save wlarch/13ede0386455da22a6bb3b18e34d4f56 to your computer and use it in GitHub Desktop.
Overwrite/bypass <iframe></iframe> height limit imposed by Wordpress
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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