CODEWITHSUNDEEP
wordpressiframeplugins
bvs
bvs

Reputation: 1087

deep linking to embedded iframe content in wordpress

Is there a WordPress plugin that will enable deep linking to an embedded iframe? I'd like to be able, for example, to tweet a URL to a post that has extra information that will be passed down to the iframe.

An example would be an iframe that plays a video. The extra information in this case might be the time offset to start playing the video.

The extra info could be passed as query params, fragments, or some other way.

Upvotes: 0

Views: 2973

Answers (1)

Jonathon Hill
Jonathon Hill

Reputation: 3495

Probably not via a WordPress plugin, unless you are looking to develop a custom plugin.

It is best to avoid iframes whenever you can for these reasons.

That said, the solution is pretty simple using the window.postMessage method and works in most browsers, including IE8 and up.

Notes:

  • All messages should be sent as strings to avoid a nasty bug in IE8/9. If you want to pass an object, pass it in JSON format.
  • You can't JSON.serialize() the window.location object in IE8. If you are trying to pass that object, you have to copy the properties one by one.
  • IE only supports el.contentWindow.postMessage(), not el.postMessage().

Outer page

window.onload = function()
{
    var child = document.getElementById('deep_link_frame');
    var msg   = {
        "location" : {
            "hash"     : window.location.hash,
            "host"     : window.location.host,
            "hostname" : window.location.hostname,
            "href"     : window.location.href,
            "origin"   : window.location.origin,
            "pathname" : window.location.pathname,
            "port"     : window.location.port,
            "protocol" : window.location.protocol,
            "search"   : window.location.search
        }
    };
    child.contentWindow.postMessage(JSON.stringify(msg), '*');
};

Inner page

function bindEvent(el, eventName, eventHandler)
{
    if (el.addEventListener)
    {
        el.addEventListener(eventName, eventHandler);
    }
    else
    {
        el.attachEvent('on' + eventName, eventHandler);
    }
}

bindEvent(window, 'message', function(e)
{
    if (e.origin === "http://your-domain.com")
    {
        var message = JSON.parse(e.data);
        alert(message.location.href);
    }
});

Upvotes: 1

Related Questions