Question

是否有WordPress插件可以实现深层链接到嵌入式iframe？例如，我希望能够将帖子的URL发送到帖子，该帖子包含将传递给iframe的额外信息。

一个例子是播放视频的iframe。这种情况下的额外信息可能是开始播放视频的时间偏移。

额外信息可以作为查询参数，片段或其他方式传递。

Answer 1

可能不是通过WordPress插件，除非您正在寻找开发自定义插件。

最好尽可能避免使用iframe these reasons。

也就是说，使用window.postMessage方法和works in most browsers，包括IE8及更高版本，解决方案非常简单。

注意：

所有消息都应该作为字符串发送，以避免在IE8 / 9中出现令人讨厌的错误。如果要传递对象，请以JSON格式传递它。
在IE8中，您不能JSON.serialize() window.location个对象。如果您尝试传递该对象，则必须逐个复制属性。
IE仅支持el.contentWindow.postMessage()，而不支持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内容

1 个答案: