草庐IT

javascript - 允许两个站点通信以了解 iframe 的当前 URL

coder 2024-01-01 原文

我正在尝试找出一种解决方案，让网站能够通过 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/

javascriptiframe34websitecomphpjquerypostmessage

有关javascript - 允许两个站点通信以了解 iframe 的当前 URL的更多相关文章

  1. ruby-on-rails - 如何在 ruby​​ 中使用两个参数异步运行 exe？ - 2

    exe应该在我打开页面时运行。异步进程需要运行。有什么方法可以在ruby​​中使用两个参数异步运行exe吗？我已经尝试过ruby​​命令-system()、exec()但它正在等待过程完成。我需要用参数启动exe，无需等待进程完成是否有任何ruby​​gems会支持我的问题？ 最佳答案 您可以使用Process.spawn和Process.wait2:pid=Process.spawn'your.exe','--option'#Later...pid,status=Process.wait2pid您的程序将作为解释器的子进程执行。除

  2. ruby-on-rails - Rails 应用程序之间的通信 - 2

    我构建了两个需要相互通信和发送文件的Rails应用程序。例如，一个Rails应用程序会发送请求以查看其他应用程序数据库中的表。然后另一个应用程序将呈现该表的json并将其发回。我还希望一个应用程序将存储在其公共(public)目录中的文本文件发送到另一个应用程序的公共(public)目录。我从来没有做过这样的事情，所以我什至不知道从哪里开始。任何帮助，将不胜感激。谢谢! 最佳答案 无论Rails是什么，几乎所有Web应用程序都有您的要求，大多数现代Web应用程序都需要相互通信。但是有一个小小的理解需要你坚持下去，网站不应直接访问彼此

  3. ruby-on-rails - rails : save file from URL and save it to Amazon S3 - 2

    从给定URL下载文件并立即将其上传到AmazonS3的更直接的方法是什么(+将有关文件的一些信息保存到数据库中，例如名称、大小等)？现在，我既不使用Paperclip，也不使用Carrierwave。谢谢 最佳答案 简单明了:require'open-uri'require's3'amazon=S3::Service.new(access_key_id:'KEY',secret_access_key:'KEY')bucket=amazon.buckets.find('image_storage')url='http://www.ex

  4. ruby - 如何使用 Ruby aws/s3 Gem 生成安全 URL 以从 s3 下载文件 - 2

    我正在编写一个小脚本来定位aws存储桶中的特定文件，并创建一个临时验证的url以发送给同事。(理想情况下，这将创建类似于在控制台上右键单击存储桶中的文件并复制链接地址的结果)。我研究过回形针，它似乎不符合这个标准，但我可能只是不知道它的全部功能。我尝试了以下方法:defauthenticated_url(file_name,bucket)AWS::S3::S3Object.url_for(file_name,bucket,:secure=>true,:expires=>20*60)end产生这种类型的结果:...-1.amazonaws.com/file_path/file.zip.A

  5. ruby-on-rails - RSpec:避免使用允许接收的任何实例 - 2

    我正在处理旧代码的一部分。beforedoallow_any_instance_of(SportRateManager).toreceive(:create).and_return(true)endRubocop错误如下:Avoidstubbingusing'allow_any_instance_of'我读到了RuboCop::RSpec:AnyInstance我试着像下面那样改变它。由此beforedoallow_any_instance_of(SportRateManager).toreceive(:create).and_return(true)end对此:let(:sport_

  6. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

  7. ruby - 这两个 Ruby 类初始化定义有什么区别？ - 2

    我正在阅读一本关于Ruby的书，作者在编写类初始化定义时使用的形式与他在本书前几节中使用的形式略有不同。它看起来像这样:classTicketattr_accessor:venue,:datedefinitialize(venue,date)self.venue=venueself.date=dateendend在本书的前几节中，它的定义如下:classTicketattr_accessor:venue,:datedefinitialize(venue,date)@venue=venue@date=dateendend在第一个示例中使用setter方法与在第二个示例中使用实例变量之间是

  8. ruby-on-rails - 如何生成传递一些自定义参数的 `link_to` URL？ - 2

    我正在使用RubyonRails3.0.9，我想生成一个传递一些自定义参数的link_toURL。也就是说，有一个articles_path(www.my_web_site_name.com/articles)我想生成如下内容:link_to'Samplelinktitle',...#HereIshouldimplementthecode#=>'http://www.my_web_site_name.com/articles?param1=value1¶m2=value2&...我如何编写link_to语句“alàRubyonRailsWay”以实现该目的？如果我想通过传递一些

  9. ruby - Rack:如何将 URL 存储为变量？ - 2

    我正在编写一个简单的静态Rack应用程序。查看下面的config.ru代码:useRack::Static,:urls=>["/elements","/img","/pages","/users","/css","/js"],:root=>"archive"map'/'dorunProc.new{|env|[200,{'Content-Type'=>'text/html','Cache-Control'=>'public,max-age=6400'},File.open('archive/splash.html',File::RDONLY)]}endmap'/pages/search.

  10. 「Python｜Selenium｜场景案例」如何定位iframe中的元素？ - 2

    本文主要介绍在使用Selenium进行自动化测试或者任务时，对于使用了iframe的页面，如何定位iframe中的元素文章目录场景描述解决方案具体代码场景描述当我们在使用Selenium进行自动化测试的时候，可能会遇到一些界面或者窗体是使用HTML的iframe标签进行承载的。对于iframe中的标签，如果直接查找是无法找到的，会抛出没有找到元素的异常。比如近在咫尺的例子就是，CSDN的登录窗体就是使用的iframe，大家可以尝试通过F12开发者模式查看到的tag_name,class_name,id或者xpath来定位中的页面元素，会抛出NoSuchElementException异常。解决

随机推荐