深度链接到Wordpress中的嵌入式iframe内容 [英] deep linking to embedded iframe content in wordpress

问题描述

是否有一个WordPress插件可以实现与嵌入式iframe的深度链接?例如，我希望能够将URL鸣叫到帖子中，该帖子包含将被传递到iframe的额外信息.

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.

一个示例是播放视频的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.

推荐答案

除非您要开发自定义插件，否则可能不会通过WordPress插件.

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

出于以下原因，最好尽可能避免使用iframe:这些原因.

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

也就是说，使用window.postMessage方法解决方案非常简单，并且在大多数浏览器中均可使用，包括IE8及更高版本.

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

注意:

• 所有消息都应以字符串形式发送，以避免IE8/9中出现讨厌的错误.如果要传递对象，请以JSON格式传递.
• 您不能在IE8中JSON.serialize() window.location对象.如果要传递该对象，则必须一个一个地复制属性.
• IE仅支持el.contentWindow.postMessage()，不支持el.postMessage().

• 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().

外部页面

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), '*');
};

内页

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);
    }
});

这篇关于深度链接到Wordpress中的嵌入式iframe内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！