<!DOCTYPE html> <html>

<head>
        <meta charset="utf-8">
        <title>iFrame message passing test</title>
        <meta name="description" content="iFrame message passing test">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <style>
                a { float:right; margin-left:10px;}
        </style>
</head>
<body>

        <b>iFrame TextArea Example</b>
        <a href="frame.content.html">Back to page 1</a>
        </a>

        <p>
                Resize the textarea below.
        </p>

        <textarea id="textArea">Resize me</textarea>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="../js/client/iframeResizer.contentWindow.min.js" defer></script>

        <script>

                function store(){
                        this.x = this.offsetWidth;
                        this.y = this.offsetHeight;
                }

                $('textarea').each(store).on('mouseover mouseout',function(){
                        if (this.offsetWidth !== this.x || this.offsetHeight !== this.y){
                                if ('parentIFrame' in window) parentIFrame.size();
                                store.call(this);
                        }
                });

        </script>

</body>

</html>