0

是否有一个 WordPress 插件可以深度链接到嵌入式 iframe?例如,我希望能够将 URL 推到帖子中,其中包含将传递给 iframe 的额外信息。

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

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

4

1 回答 1

1

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

由于这些原因,最好尽可能避免使用 iframe 。

也就是说,使用该window.postMessage方法的解决方案非常简单,并且适用于大多数浏览器,包括 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);
    }
});
于 2013-10-21T20:23:57.543 回答