Vue

Hi there,

I am trying to get your component to work inside of Vue 2 I was able to get the npm installed and my host page running. I have the client script installed in the child iframe as well, but am getting this warning/error:

[iFrameSizer][Host page: oauth2relay737909339] IFrame has not responded within 10 seconds. Check iFrameResizer.contentWindow.js has been loaded in iFrame. This message can be ingored if everything is working, or you can set the warningTimeout option to a higher value or zero to suppress this warning.

I also setup the callbacks, but the messages that come back on resize and message are ‘undefined’.

<template>
	<div class="row">
		<div class="col-lg-12">
			<div class="panel panel-flat">
				<!-- <iframe id="myIframe" :src="getTarget()" scrolling="no" ref="myIFrame" />  -->
				<iframe id="myIframe" src="https://www.trueatlas.com/vanilla.html" scrolling="no" ref="myIFrame">
				</iframe>


			</div>
		</div>
	</div>
</template>
<script lang="ts">
	import * as Vue from 'vue'
	import { NavigationService } from '../../shared/Utilities/Navigation';
	import * as resizer from 'iframe-resizer';
	import { Bus } from '../../main';
	export default {
		name: 'iFrameHolder',
		data() {
			return {
				NS: NavigationService,
				ifr: resizer,
			}
		},
		components: { resizer },
		methods:
		{
			msgCB: function () {
				console.log('got ready');
			},
			gotMessage: function (messageData) {
				console.log(messageData)
			},
			resizeIframe: function (height) {
				console.log(height);
				//document.getElementById('frame_name_here').height = parseInt(height)+60;
			},
			getiFrameWidth: function () {
				return this.$store.state.iframeWidth;
			},
			getiFrameHeight: function () {
				return this.$store.state.iframeHeight;
			},
			getTarget: function () {

				return this.$store.state.iframeTarget;
			}
		},

		updated: function () {
			this.ifr.iframeResizer({ log: true, warningTimeout: 10, checkOrigin: false, autoResize: true, resizeFrom: 'child', messageCallback: function (messageData) { console.log() }, readyCallback: this.msgCB() }, this.$refs.myIFrame);
		},
		created: function () {
			this.NS = new NavigationService();
			this.NS.router = this.$router;
			this.$store.state.Crumb = "";

			this.ifr.iframeResizer({ log: true, warningTimeout: 10000, checkOrigin: false, autoResize: true, resizeFrom: 'child', resizedCallback: this.gotMessage(), messageCallback: this.gotMessage(), readyCallback: this.msgCB() }, this.$refs.myIFrame);


		}
	}

</script>
<style>
	iframe {
		width: 100%
	}
</style>

[adesombergh]

Good idea, this should work:

import Vue from 'vue'
import iFrameResize from 'iframe-resizer/js/iframeResizer'

Vue.directive('resize', {
  bind: function (el, {value = {}}) {
    el.addEventListener('load', () => iFrameResize(value, el))
  },
})

Now we can pass options like this:

<iframe v-resize="{ log: true }" width="100%" src="myiframe.html" frameborder="0"></iframe>

[shiyabin]

Why does my use in vue not work?