我正在尝试找出一种解决方案，让网站能够通过 iframe 了解用户所在的 URL。
网站1: http://website.website.com(远程网站，只能在网页中添加javascript和html)
网站 2: https://example.com(完全可编辑，php、html、js 等)
当前代码:(来自网站 2 (Example.com)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Website.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body class="body_blank">
<script type="text/javascript">
jq = jQuery.noConflict();
jq(document).ready(function() {
var currentFramePath = '';
var iframe = '<iframe src="{src}" id="#iFrameContainer" style="position:fixed; top:0px; bottom:0px; right:0px; width: 100%; border: none; margin:0; padding:0; overflow: hidden; z-index:999999; height: 100%;">';
var urlFrame = getUrlParameter('currentFrame');
if(urlFrame != null && urlFrame != ''){
console.log("Frame not found");
jq('#iFrameContainer').html(iframe.replace('{src}', urlFrame));
currentFramePath = urlFrame;
}
jq('#iFrameContainer').click(function(){
console.log("Clicked in frame");
currentFramePath = jq(this).attr('href');
console.log(currentFramePath);
});
setInterval(function(){
window.location = window.location.href.split('?')[0] + '?currentFrame=' + currentFramePath;
console.log("Update Query");
}, 5000);
});
function getUrlParameter(sParam) {
var sPageURL = decodeURIComponent(window.location.search.substring(1)),
sURLVariables = sPageURL.split('&'),
sParameterName,
i;
console.log("Get Query");
for (i = 0; i < sURLVariables.length; i++) {
sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] === sParam) {
return sParameterName[1] === undefined ? true : sParameterName[1];
}
}
};
</script>
<div id="wrapper" class="wrapper_blank">
<iframe src="http://website.website.com" id="#iFrameContainer" style="position:fixed; top:0px; bottom:0px; right:0px; width: 100%; border: none; margin:0; padding:0; overflow: hidden; z-index:999999; height: 100%;">
</div>
</body>
</html>
问题
如果我刷新 example.com 上的页面 (iframe)，它会刷新并忘记用户所在/曾经所在的页面...
如您所见，我试图通过 iFrame 检测他们的页面来使其正常工作，但这是不可能的，因为它位于不同的域中。
解决方案？
我正在寻找某种解决方案来执行如下所述的操作，请记住可能有更好的解决方案。
我希望网站 website.website.com 获取用户所在页面的当前路径/url(正在通过 iframe 查看)并发送此路径/通过 url 到 example.com 然后 example.com 将更新 session /临时 cookie/临时本地存储/变量...等，这意味着它将调整查询字符串以将其自身指向正确的用户刷新页面时的 URL，导致刷新正确记住他们所在的页面。
尝试
我尝试通过将以下代码放在各自的站点上来使用 postMessage 函数:
网站 1 额外代码
<script type="text/javascript">
setInterval(function() {
parent.postMessage(window.location.pathname, "https://website.com");
},1000);
</script>
网站 2 额外代码:
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
eventer(messageEvent, function(e) {
console.log('Parent Message: ', e.data);
}, false);
但是什么也没有发生，没有控制台消息或错误……什么也没有。
我什至尝试过复制 https://blog.teamtreehouse.com/cross-domain-messaging-with-postmessage 之类的东西但没有任何帮助:(
有什么想法我做错了什么以及解决它以实现这一目标的方法吗？
谢谢
编辑
我在 http://website.website.com 中尝试了以下 js但它没有用:
localStorage.setItem('CurrentURLChecker', window.location.href)
if (localStorage.getItem('CurrentURLChecker')) {
if (window.parent.location.href == "https://website.com/" ) {
console.log("URL FOUND");
}
}
Uncaught DOMException: Blocked a frame with origin "http://website.website.com" from accessing a cross-origin frame at http://website.website.com/:251:44
编辑 - 一个例子
网站 1 = "http://stackoverflow.serviceprovider.com "
网站 2 = "https://stackoverflow.com "
网站 2 包含一个 iframe，它准确显示网站 1 显示的内容。
我永远不会访问网站 1，所有点击都在网站 2 上完成
如果我点击 iframe 中的一个链接，它将导航到:http://stackoverflow.serviceprovider.com/this-new-page/那么网站 1 应该能够检测到这一点并存储 iframe 位置并记住它。
现在，如果我刷新浏览器而不是加载 iframe http://stackoverflow.serviceprovider.com它会加载他们实际刷新的页面，即 http://stackoverflow.serviceprovider.com/this-new-page/
选项卡/窗口 URL 将始终保持在 https://stackoverflow.com/ 上但是有必要附加一个查询字符串，以便可以共享链接。
就这么简单。
最佳答案
出于安全原因，只要 iframe 的内容和引用的 javascript 从同一域提供，您就只能获取 url。
如果这两个域不匹配，您将遇到跨站点引用脚本安全限制。
关于javascript - 允许两个站点通信以了解 iframe 的当前 URL，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55235639/