From 84c829467b71c744fe24c094b9ea81b9a9ffdc47 Mon Sep 17 00:00:00 2001 From: Ilya Kreymer Date: Mon, 23 May 2016 12:10:10 -0700 Subject: [PATCH] framed replay: use postMessage() instead of custom function to notify of replay frame changing url, include different type of change, eg. load, replaceState, pushState, #181 --- pywb/static/wb.js | 23 +++++++++++++++------ pywb/static/wb_frame.js | 45 ++++++++++++++++++++++++----------------- pywb/static/wombat.js | 22 +++++++++++++++----- 3 files changed, 60 insertions(+), 30 deletions(-) diff --git a/pywb/static/wb.js b/pywb/static/wb.js index e186f1df..f57e833b 100644 --- a/pywb/static/wb.js +++ b/pywb/static/wb.js @@ -123,12 +123,23 @@ function notify_top() { return; } - if (window.__WB_top_frame.update_wb_url) { - window.__WB_top_frame.update_wb_url(window.WB_wombat_location.href, - wbinfo.timestamp, - wbinfo.request_ts, - wbinfo.is_live); - } + //if (window.__WB_top_frame.update_wb_url) { + // window.__WB_top_frame.update_wb_url(window.WB_wombat_location.href, + // wbinfo.timestamp, + // wbinfo.request_ts, + // wbinfo.is_live); + //} + + var message = { + "url": window.WB_wombat_location.href, + "ts": wbinfo.timestamp, + "request_ts": wbinfo.request_ts, + "is_live": wbinfo.is_live, + "title": "", + "wb_type": "load", + } + + window.__WB_top_frame.postMessage(message, "*"); remove_event("readystatechange", notify_top, document); } diff --git a/pywb/static/wb_frame.js b/pywb/static/wb_frame.js index c9e47ef3..168b914f 100644 --- a/pywb/static/wb_frame.js +++ b/pywb/static/wb_frame.js @@ -38,27 +38,21 @@ function make_url(url, ts, mod) } } -function push_state(url, timestamp, request_ts, capture_str, is_live) { +function push_state(state) { var frame = document.getElementById(IFRAME_ID).contentWindow; if (frame.WB_wombat_location) { var curr_href = frame.WB_wombat_location.href; // If not current url, don't update - if (url != curr_href) { + if (state.url != curr_href) { return; } } - var state = {} - state.timestamp = timestamp; - state.request_ts = request_ts; - state.outer_url = make_url(url, state.request_ts, wbinfo.frame_mod); - state.inner_url = make_url(url, state.request_ts, wbinfo.replay_mod); - state.url = url; - state.capture_str = capture_str; - state.is_live = is_live; + state.outer_url = make_url(state.url, state.request_ts, wbinfo.frame_mod); + state.inner_url = make_url(state.url, state.request_ts, wbinfo.replay_mod); - var canon_url = make_url(url, state.request_ts, ""); + var canon_url = make_url(state.url, state.request_ts, ""); if (window.location.href != canon_url) { window.history.replaceState(state, "", canon_url); } @@ -157,7 +151,13 @@ function iframe_loaded(event) { request_ts = ts; } - update_wb_url(url, ts, request_ts, is_live); + var state = {} + state["url"] = url; + state["ts"] = ts; + state["request_ts"] = request_ts; + state["is_live"] = is_live + + update_wb_url(state); } @@ -165,12 +165,18 @@ function init_pm() { var frame = document.getElementById(IFRAME_ID).contentWindow; window.addEventListener("message", function(event) { - // Pass to replay frame if (event.source == window.parent) { + // Pass to replay frame frame.postMessage(event.data, "*"); } else if (event.source == frame) { - // Pass to parent - window.parent.postMessage(event.data, "*"); + + // Check if iframe url change message + if (typeof(event.data) == "object" && event.data["wb_type"]) { + update_wb_url(event.data); + } else { + // Pass to parent + window.parent.postMessage(event.data, "*"); + } } }); @@ -181,14 +187,14 @@ function init_pm() { } -function update_wb_url(url, ts, request_ts, is_live) { - if (curr_state.url == url && curr_state.timestamp == ts) { +function update_wb_url(state) { + if (curr_state.url == state.url && curr_state.ts == state.ts) { return; } - capture_str = _wb_js.ts_to_date(ts, true); + state['capture_str'] = _wb_js.ts_to_date(state.ts, true); - push_state(url, ts, request_ts, capture_str, is_live); + push_state(state); } // Load Banner @@ -237,3 +243,4 @@ function init_hash_connect() { } document.addEventListener("DOMContentLoaded", init_hash_connect); + diff --git a/pywb/static/wombat.js b/pywb/static/wombat.js index 3032df0c..c6d416f3 100644 --- a/pywb/static/wombat.js +++ b/pywb/static/wombat.js @@ -718,11 +718,23 @@ var wombat_internal = function($wbwindow) { orig_func.call(this, state_obj, title, url); - if ($wbwindow.__WB_top_frame && $wbwindow != $wbwindow.__WB_top_frame && $wbwindow.__WB_top_frame.update_wb_url) { - $wbwindow.__WB_top_frame.update_wb_url($wbwindow.WB_wombat_location.href, - wb_info.timestamp, - wb_info.request_ts, - wb_info.is_live); + //if ($wbwindow.__WB_top_frame && $wbwindow != $wbwindow.__WB_top_frame && $wbwindow.__WB_top_frame.update_wb_url) { + // $wbwindow.__WB_top_frame.update_wb_url($wbwindow.WB_wombat_location.href, + // wb_info.timestamp, + // wb_info.request_ts, + // wb_info.is_live); + //} + if ($wbwindow.__WB_top_frame && $wbwindow != $wbwindow.__WB_top_frame) { + var message = { + "url": url, + "ts": wb_info.timestamp, + "request_ts": wb_info.request_ts, + "is_live": wb_info.is_live, + "title": title, + "wb_type": func_name, + } + + $wbwindow.__WB_top_frame.postMessage(message, "*"); } }