Conflict with WP Rocket lazy loading when content contains an iframe

[jester1979]

I have a Box containing an iframe. When I also use WP Rockets setting for the lazy loading of iframes. My Box doesn't popup anymore. There is a JS error in my console. ( I think the JSON with the boxzilla params have gotten corrupt somehow )

[dannyvankooten]

Hey @jester1979, nice to see you around here. What does the error in your console say? Or do you have a link to where I can see this happening? Thanks!

[jester1979]

Uncaught SyntaxError: Unexpected identifier triggered op de volgende inline-code =>

<script type='text/javascript'>/*  */
var boxzilla_options = {"testMode":"","boxes":[{"id":73718,"icon":"&times;","content":"<p style=\"text-align: center;\">Wilt u het laatste nieuws voor financials per e-mail ontvangen? <strong>Schrijf u in voor de nieuwsbrief cm:signalen<\/strong><br \/>\n<iframe src="data:image/gif;base64,R0lGODdhAQABAPAAAP///wAAACwAAAAAAQABAEACAkQBADs=" data-lazy-src=\"https:\/\/vakmedianet.2bmore.nl\/mijnvakmedianet\/subscribe\/cmweb\" width=\"400\" height=\"150\" frameborder=\"0\" scrolling=\"no\"><\/iframe><\/p>\n","css":{"background_color":"#ffffff","color":"#333333","width":450,"border_color":"#e6342a","border_width":2,"position":"bottom-right"},"trigger":{"method":"percentage","value":30},"animation":"fade","cookie":{"triggered":0,"dismissed":24},"rehide":true,"position":"bottom-right","minimumScreenWidth":0,"closable":true}]};
/*  */</script>

En daarna volgt:

Uncaught TypeError: Cannot read property 'inited' of undefined
    at script.min.js:1
    at Object.n.1.boxzilla (script.min.js:1)
    at r (script.min.js:1)
    at i (script.min.js:1)
    at script.min.js:1
    at script.min.js:1

[dannyvankooten]

Thanks, that definitely helps! You're right about the boxzilla_options being corrupted, it looks like the iframe HTML specifically is not escaped.

<iframe src="data:image/gif;base64,R0lGODdhAQABAPAAAP

There should be a slash in front of that src=" opening quote for escaping.

Boxzilla uses the default function in WordPress core to dump that object though, wp_localize_script, so I am not too sure yet what is causing this.... In the midst of moving between houses right now but I'll investigate soon!

[lkraav]

@dannyvankooten I think I may be seeing weirdness with Gravity Forms ajax mode also. Set up a simple blank site to demo this, go to http://uprecords.org

Submit doesn't work, error validation doesn't happen etc. "Doesn't work" is not fully correct actually - network inspector shows the request is made, and correct response is received, but it isn't translated into the box contents.

GF ajax works also through a hidden IFRAME. Related?

[lkraav]

I think I may be seeing weirdness with Gravity Forms ajax mode also. Set up a simple blank site to demo this, go to http://uprecords.org

I've solved this part. It's about GF attaching its initialization to $(document).ready() which is obviously too early for Boxzilla to get its boxes built. But the following magic gets things working again:

add_filter( 'boxzilla_box_content', function( $content, $box ) {
    $content = str_replace( 'jQuery(document).ready(', 'Boxzilla.on( "done",', $content );
    return $content;
}, 12, 2 );

Maybe there's a more general solution to this.

I think the original poster's problem is therefore different and your analysis in https://github.com/ibericode/boxzilla-wp/issues/85#issuecomment-276640052 seems to solve it correctly - I reached the same conclusion when inspecting the JSON string.