JSFiddle - React, Tailwind, and code Playground

by Anderson Madeira

JavaScript

// app.script.js
// Script responsável pela comunicação do iframe com o mobile pra prover mais experiência nativa
(function () {
    var origin = '*',
        surl = window.location.href.split("/"),
        baseUrl = surl[0] + "//" + surl[2];

    // Checa se a página está sendo incluída em um iframe
    function inIframe () {
        try {
            return window.self !== window.top;
        } catch (e) {
            return true;
        }
    }

    /**
     * @param {*} elements HTMLCollection
     * @param {*} event_name string
     * @param {*} event_handler callback
     */
    function bindEventForEach(elements, event_name, event_handler) {
        for ( i = 0; i < elements.length; i++ ) {
            elements[i].addEventListener(event_name, event_handler);
        }
    }

    // Chamado sempre que o usuário clicar num link
    function onLinkClicked(event) {
        href = this.getAttribute('href') || '';
        text = this.innerText || this.firstElementChild.tagName;

        // Se estiver em um iframe e se for link externo desabilita clique pra que seja tratado no mobile, chamando o app externo ou in-app browser
        if ( inIframe() && ( href.startsWith('http://') || href.startsWith('https://') || href.startsWith('whatsapp://') || href.startsWith('javascript:shareFacebook') ) ) {
            event.preventDefault();
        }
    
        // Mensagem: Link clicado
        parent.postMessage( { type: 'link', target: text }, origin );
    }

    function onFormSubmit(event) {
        // Mensagem: Form submetido
        parent.postMessage( { type: 'form' }, origin );
    }

    window.onload = function(event) {

        // Se for o mobile, então
        if ( inIframe() ) {
            // Substitui o menu por um clone para remover os eventos de clique, 
            // para não ter o mesmo menu do responsivo e sim o menu do mobile
            el_menu = document.getElementById('js-menu-toggle');
            el_menu.parentNode.replaceChild(...