Vue.js + manipulate iframe content

Hi!

Did you find a Vue.js specific solution or are you still using jQuery to update the iframe contents?

Why not just post form variables to the iframe, and build the preview in PHP?

<form action="/dashboard/preview" method="post" target="preview">

Or generate the preview in-page?

iframes have specific security issues that can be difficult to overcome, and not all solutions work in all browsers.

I know this was an entire year ago but the basic ideas Jeffrey goes over in this tutorial should work, as long as both pages are the same domain and you have full control over them. I did something similar very recently (but much more messy).

https://laracasts.com/series/learn-vue-2-step-by-step/episodes/24

In the parent window:

window.parentVue = new Vue({

    el: '#something',

    data: {
        iframeData: {    
            myVar1: 'something',
            myVar2: 'something'
        }
    }

});

In the child iframe:

new Vue({

    el: '#something',

    data: parent.parentVue.iframeData

});

From there, altering iframeData in the parent window should update the iframe.

IE notes:

I banged my head into a wall trying to figure out how to get this to work in IE, if the iframe needs to be refreshed. It was causing a "Can't execute code from freed script error.".

The solution was actually really simple. In your parent window, you just need to make sure that parentVue.iframeData object is converted back to a normal object before the iframe loads.

window.parentVue.iframeData = JSON.parse(JSON.stringify(window.parentVue.iframeData));

Hey @iamtoddperkins , Just trying to use your code, but without success... Can you please write where you put all this codes (in same file or 2 seprate?) + Show your html/php code... I can't figure it out how you call #something twice, one from iframe and one from main file...

Wish you could help me out with this, you're the only one in the internet that write about manipulate iframe with vue.. :)

EDIT:

I figure it out (I made #something in the main file and in the iframe file, then make two script tags for each with your codes, and it's work) BUT - I need an explaination of the IE issue and where to put the code you give us

Thanks!