How to ensure the visual editor doesn’t ruin my iframe?

by

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">
</iframe>
<script type="text/javascript" src="https://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">
</iframe>
<script type="text/javascript" src="https://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 -->.

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="https://wordpress.stackexchange.com/questions/314518/<?php echo $args["source']; ?>" scrolling="no" width="100%" style="padding:0px;margin:0px;border-width:0px;" frameborder="0">
    </iframe>
    <script type="text/javascript" src="https://wordpress.stackexchange.com/questions/314518/<?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']

Leave a Comment