Use Header from another WordPress site

Question

Use Header from another WordPress site

Navigation

#1 by (0 votes)

2

I need to develop a website in WordPress, where I have to use the header (menu) of another site also in WordPress. One solution I found was to embed the same via Iframe, but it would have a delay a bit different from the other content on the site. Is there another alternative to this?

php html5 header wordpress

asked by anonymous 04.11.2015 / 13:11

1 answer

Collate MongoDb Scheduled Tasks on the Web

score 0 · Answer 1

I'm not going to say it's impossible, but I can not see any way to do this natively in WP ... if it was some specific content, such as a menu or post,

I think it has to be the same iframe, the solution I thought is to make an image over the iframe, as close as possible to the content that will pull from the other site. Once loaded this content in the iframe, make a fade of the image and show the iframe. The image needs to be removed too, otherwise it blocks the interaction with the iframe.

Depending on the graphic art of the image and the similarity to the content of the iframe, the transition is quite reasonable.

I made this proof of concept, you can not put it as Stack Snippet or JSFiddle because they do not accept to show iframes. In this test, the content is the JSFiddle website (which has been accepted within an iframe), and the image is a snapshot I made the iframe loaded on the test page.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
        #imagem {
            z-index:10;
            background-image: url("http://i.stack.imgur.com/Otse0.png");
            width: 400px;
            height: 250px;
            position: absolute;
        }
        #menu {
            z-index:1;
            width: 400px;
            height: 250px;
            position: absolute;
        }
    </style>
    <title>Teste iframe com transição ao carregar</title>
    <script type='text/javascript'>
        function fadeOut( el, duration ) {
            /**
             * @author: http://stackoverflow.com/a/867620/1287812
             * @param el - Elemento para fazer fadeout.
             * @param duration - Duração da animação em milisegundos.
             */
            var step = 10 / duration,
                opacity = 1;
            function next() {
                if (opacity <= 0) { return; }
                el.style.opacity = ( opacity -= step );
                setTimeout(next, 10);
            }
            next();
        }    
        function remove( id ) {
            /* @author: http://stackoverflow.com/a/3391282/1287812 */
            return (elem=document.getElementById(id)).parentNode.removeChild(elem);
        }
        window.onload=function(){
            var oIframe = document.getElementById('iframe');
            oIframe.onload = function() {
                var image = document.getElementById('imagem');
                fadeOut(image, 500);
                // Remover a imagem um pouco depois do fade 
                setTimeout(function(){ remove('imagem'); },600);
            }
            oIframe.src = 'https://jsfiddle.net/';
        }
    </script>
</head>
<body>
    <div id="frame-total">
        <div id="imagem"></div>
        <div id="menu">
            <iframe id="iframe" src="" width="400" height="250" frameBorder="0"></iframe>
        </div>
    </div>  
</body>
</html>

Interesting article that I found while searching: Iframe loading techniques and performance