Getting Vue.js to react on iframe load
381
post-template-default,single,single-post,postid-381,single-format-standard,bridge-core-3.0.1,qodef-qi--touch,qi-addons-for-elementor-1.5.3,qode-page-transition-enabled,ajax_updown,page_not_loaded,,vertical_menu_enabled,no_animation_on_touch,side_area_uncovered_from_content,qode-theme-ver-28.7,qode-theme-bridge,disabled_footer_top,qode_header_in_grid,wpb-js-composer js-comp-ver-6.8.0,vc_responsive,elementor-default,elementor-kit-6

Getting Vue.js to react on iframe load

21 May 2017 Getting Vue.js to react on iframe load

Posted at 17:23h in Programming, VueJS by

I recently needed to pull in a third party form into a page where I was using Vue.js. The form is displayed in an iframe and the adjacent content needed to react to submitting of the form, in this case a header needed to disappear. Here is what I came up with:


data: {
load_count: 0,
display_header: true
},
method:
hideHeader: function() {
this.load_count++;
if(this.load_count >= 2){
this.display_header = false;
}
},
template:'<div><h2 v-show="display_header">Please register</h2>'
+'<iframe v-on:load="hideHeader" width="500" height="450"'
+'src="http://www.example.com/path/to/form"></iframe>'
+'</div>'

Note that the hideHeader function will be triggered on the first load as well as all subsequent loads. I added a counter so that the header was changed on the second load, presumably when the form is submitted. It would have been nice to get the actual href of the iframe when it changed but that is not possible when using a form from a different domain.

Tags:


Mastodon