I have this iframe and JavaScript embedded in a post:

<iframe onload="fa_iframeresize.do(this);" src="https://example.com/calc.php?tp=dif&cl=beleggen&h=1&wf=19370&country=NL" scrolling="no" width="100%" style="padding:0px;margin:0px;border-width:0px;" frameborder="0">
<script type="text/javascript" src="//example.com/iframeResizeMe.min.js.gz"></script>

But whenever I go to the visual editor the HTML gets changed tiny bit in such a way that example.com's code can't handle it anymore:

<iframe style="padding: 0px; margin: 0px; border-width: 0px;" src="https://example.com/calc.php?tp=dif&amp;cl=beleggen&amp;h=1&amp;wf=19370&amp;country=NL" width="100%" frameborder="0" scrolling="no">
<script type="text/javascript" src="//example.com/iframeResizeMe.min.js.gz"></script>

Is there a way to keep the visual editor from changing a chunk HTML?

I tried the iframe extension but that didn't really handle it properly. I'd also like to avoid creating my own plugin for this.

Ideally I'd like e.g. <!-- NOREFORMAT --><iframe></iframe><script></script><!-- /NOREFORMAT -->.

  • 2
    Note that the only reason you're able to insert a raw iframe at all is because you're an administrator with the dangerous unfiltered_html capability. Use an iframe shortcode instead, and then enqueue a script that hooks on to the onLoad of all iframes instead of adding dangerous inline JS script attributes
    – Tom J Nowell
    Sep 18, 2018 at 13:15
  • It is possible to allow iframe tag for the tinyMCE editor, see wordpress.stackexchange.com/a/3067/170 However I think you should create a plugin that add a shortcode to add this inside the content. SO you get a more valid content, easier to maintain if you will change this code or remove them from the content in the future.
    – bueltge
    Dec 12, 2018 at 12:55
  • visit link see..wordpress.stackexchange.com/questions/243780/… Dec 14, 2018 at 4:37

1 Answer 1

    add_shortcode('custom_iframe_shortcode', 'build_iframe');
function build_iframe($atts) {
    $defaults = array(
        'source' => 'https://example.com/calc.php?tp=dif&cl=beleggen&h=1&wf=19370&country=NL',
        'script_source' => '//example.com/iframeResizeMe.min.js.gz'
    $args = shortcode_atts($defaults, $atts);

    ob_start(); ?>
    <iframe onload="fa_iframeresize.do(this);" src="<?php echo $args['source']; ?>" scrolling="no" width="100%" style="padding:0px;margin:0px;border-width:0px;" frameborder="0">
    <script type="text/javascript" src="<?php echo $args['script_source']; ?>"></script>
    <?php return ob_get_clean();

then call this like [build_iframe] or [build_iframe source="https://blah" script_source="https://blah/blah.js']

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.