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

I have this iframe and JavaScript embedded in a post:

<iframe onload="fa_iframeresize.do(this);" src=".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="//example/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's code can't handle it anymore:

<iframe style="padding: 0px; margin: 0px; border-width: 0px;" src=".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="//example/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 -->.

I have this iframe and JavaScript embedded in a post:

<iframe onload="fa_iframeresize.do(this);" src="https://example/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="//example/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's code can't handle it anymore:

<iframe style="padding: 0px; margin: 0px; border-width: 0px;" src="https://example/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="//example/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 -->.

• visual-editor
• iframe

Share Improve this question edited Dec 12, 2018 at 12:53 bueltge 17.1k77 gold badges6262 silver badges9797 bronze badges asked Sep 18, 2018 at 13:12 thethe 1,56822 gold badges1313 silver badges3232 bronze badges 3

• 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 ♦ Commented Sep 18, 2018 at 13:15
• It is possible to allow iframe tag for the tinyMCE editor, see wordpress.stackexchange/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 Commented Dec 12, 2018 at 12:55
• visit link see..wordpress.stackexchange/questions/243780/… – Ashvin Monpara Commented Dec 14, 2018 at 4:37

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1 +50

    add_shortcode('custom_iframe_shortcode', 'build_iframe');
function build_iframe($atts) {
    $defaults = array(
        'source' => 'https://example/calc.php?tp=dif&cl=beleggen&h=1&wf=19370&country=NL',
        'script_source' => '//example/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">
    </iframe>
    <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']