Re-dimension iframe to its content in vue js

1

I am developing a site in which I have to incorporate a iframe that shows the content of another site, the problem I have is in height of iframe , since it does not accommodate its content .

Investigating I found this solution in js but the problem is that it does not come out in vue JS .

Source of solution in JS.

JS :

function getDocHeight(doc) {
    doc = doc || document;
    // stackoverflow.com/questions/1145850/
    var body = doc.body, html = doc.documentElement;
    var height = Math.max( body.scrollHeight, body.offsetHeight, 
        html.clientHeight, html.scrollHeight, html.offsetHeight );
    return height;
}

function setIframeHeight(id) {
    var ifrm = document.getElementById(id);
    var doc = ifrm.contentDocument? ifrm.contentDocument: 
        ifrm.contentWindow.document;
    ifrm.style.visibility = 'hidden';
    ifrm.style.height = "10px"; // reset to minimal height ...
    // IE opt. for bing/msn needs a bit added or scrollbar appears
    ifrm.style.height = getDocHeight( doc ) + 4 + "px";
    ifrm.style.visibility = 'visible';
}

iframe :

<iframe id="ifrm" src="https://www.google.com.co" onload="setIframeHeight(this.id)"></iframe>

In Vue JS try to create the methods in the following way:

methods: {
    getDocHeight: function (doc) {
        doc = doc || document;
        // stackoverflow.com/questions/1145850/
        var body = doc.body, html = doc.documentElement;
        var height = Math.max( body.scrollHeight, body.offsetHeight, 
        html.clientHeight, html.scrollHeight, html.offsetHeight );
        return height;
    },
    setIframeHeight: function (id) {
        var ifrm = document.getElementById(id);
        var doc = ifrm.contentDocument? ifrm.contentDocument: 
        ifrm.contentWindow.document;
        ifrm.style.visibility = 'hidden';
        ifrm.style.height = "10px"; // reset to minimal height ...
        // IE opt. for bing/msn needs a bit added or scrollbar appears
        ifrm.style.height = getDocHeight( doc ) + 4 + "px";
        ifrm.style.visibility = 'visible';
    } 

}

I also tried to use the functions directly from Js but it did not work for me.

    
asked by Andrés 31.01.2018 в 00:46
source

0 answers