草庐IT

javascript - 统一 iframe 内呈现的独立页面的路由 Urls

coder 2023-08-03 原文

我在 angularjs 上有几个应用程序(单页应用程序，独立的)。 它们具有不同的 UI 样式。

我必须创建新的应用程序(独立的)，导航面板位于页面左侧，iframe 位于页面右侧。

导航面板部分解决了 UI 样式统一问题。

iframe 将包含其他独立应用。

Iframe 是要求

我已经基于 angularJs 创建了带有导航和 iframe 的主应用。

因此，主应用程序通过 iframe 加载独立模块(SPA/AngularJs)并且这些模块工作正常。

但是，有一个“小”问题。每个独立模块都有自己的 angularjs 路由。它有效，但不显示在主窗口中(在 iframe 所在的主应用程序中)

是否可以统一应用主窗口的路由和iframe路由的路由。

有什么想法吗？

最佳答案

好的，我花了一点时间让您提出可行的解决方案。然而，它以一定程度的一致性和对 Angular 应用程序的控制为前提。

第一步是简单地添加一个导航，其中包含指向我的子 Angular 应用部分的链接:

<nav>
    <ul>
        <li><a href="#/app1/main">App1</a></li>
        <li><a href="#/app2/home">App2</a></li>
    </ul>
</nav>

在同一个父页面上，我还根据您的要求 添加了一个 iframe :)

<section>
    <iframe src=""></iframe>
</section>

用下面的脚本来处理父窗口的地址变化:

// Simple method to look for the second index of something
String.prototype.secondIndexOf = function (val) {
    var fst = this.indexOf(val);
    var snd = this.indexOf(val, fst + 1)
    return snd
}

// My goto method to basically go to somewhere in my angular apps
function goto(app, route) {
    $('iframe').attr('src', app + '/test.html#' + route)
}

// upon hash change of the parent page I will call my goto method if there is a hash
$(window).on('hashchange', function () {
    var hash = location.hash;

    if (hash) {
        var appName = hash.substring(hash.indexOf('app'), hash.indexOf('app') + 4);
        var route = hash.substring(hash.secondIndexOf('/'));
        goto(appName, route);
    }

});

// On initial page load I also like to trigger this hash change to
// go to the right location initially
$(window).trigger('hashchange');

显然，这似乎是一种单向解决方案，除非我们还创建从子 Angular 应用程序返回到父窗口的向后 url 修改。

为了实现这一点，我决定将哈希更改推送回每个应用程序的 $routeChangeStart 事件中的父窗口:

例如，对于 app1，它将是:

.run(["$rootScope", function ($rootScope) {

    $rootScope.$on('$routeChangeStart', function(next, current) {

    if (current.$$route){
        window.parent.location.hash = "#/app1" + current.$$route.originalPath;
    }

});

关于javascript - 统一 iframe 内呈现的独立页面的路由 Urls，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26034204/

javascriptiframesectionhashjqueryhtmlangularjs

有关javascript - 统一 iframe 内呈现的独立页面的路由 Urls的更多相关文章

  1. ruby-on-rails - Rails 3 中的多个路由文件 - 2

    Rails2.3可以选择随时使用RouteSet#add_configuration_file添加更多路由。是否可以在Rails3项目中做同样的事情？ 最佳答案 在config/application.rb中:config.paths.config.routes在Rails3.2(也可能是Rails3.1)中，使用:config.paths["config/routes"] 关于ruby-on-rails-Rails3中的多个路由文件，我们在StackOverflow上找到一个类似的问题

  2. ruby - 解析 RDFa、微数据等的最佳方式是什么，使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

    我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

  3. ruby-on-rails - 独立 ruby​​ 脚本的配置文件 - 2

    我有一个在Linux服务器上运行的ruby​​脚本。它不使用rails或任何东西。它基本上是一个命令行ruby​​脚本，可以像这样传递参数:./ruby_script.rbarg1arg2如何将参数抽象到配置文件(例如yaml文件或其他文件)中？您能否举例说明如何做到这一点？提前谢谢你。 最佳答案 首先，您可以运行一个写入YAML配置文件的独立脚本:require"yaml"File.write("path_to_yaml_file",[arg1,arg2].to_yaml)然后，在您的应用中阅读它:require"yaml"arg

  4. ruby - rails 3 redirect_to 将参数传递给命名路由 - 2

    我没有找到太多关于如何执行此操作的信息，尽管有很多关于如何使用像这样的redirect_to将参数传递给重定向的建议:action=>'something',:controller=>'something'在我的应用程序中，我在路由文件中有以下内容match'profile'=>'User#show'我的表演Action是这样的defshow@user=User.find(params[:user])@title=@user.first_nameend重定向发生在同一个用户Controller中，就像这样defregister@title="Registration"@user=Use

  5. ruby-on-rails - Rails 3，嵌套资源，没有路由匹配 [PUT] - 2

    我真的为这个而疯狂。我一直在搜索答案并尝试我找到的所有内容，包括相关问题和stackoverflow上的答案，但仍然无法正常工作。我正在使用嵌套资源，但无法使表单正常工作。我总是遇到错误，例如没有路线匹配[PUT]"/galleries/1/photos"表格在这里:/galleries/1/photos/1/edit路线.rbresources:galleriesdoresources:photosendresources:galleriesresources:photos照片Controller.rbdefnew@gallery=Gallery.find(params[:galle

  6. 叮咚买菜基于 Apache Doris 统一 OLAP 引擎的应用实践 - 2

    导读：随着叮咚买菜业务的发展，不同的业务场景对数据分析提出了不同的需求，他们希望引入一款实时OLAP数据库，构建一个灵活的多维实时查询和分析的平台，统一数据的接入和查询方案，解决各业务线对数据高效实时查询和精细化运营的需求。经过调研选型，最终引入ApacheDoris作为最终的OLAP分析引擎，Doris作为核心的OLAP引擎支持复杂地分析操作、提供多维的数据视图，在叮咚买菜数十个业务场景中广泛应用。作者｜叮咚买菜资深数据工程师韩青叮咚买菜创立于2017年5月，是一家专注美好食物的创业公司。叮咚买菜专注吃的事业，为满足更多人“想吃什么”而努力，通过美好食材的供应、美好滋味的开发以及美食品牌的孵

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

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

  8. C51单片机——实现用独立按键控制LED亮灭（调用函数篇） - 2

    说在前面这部分我本来是合为一篇来写的，因为目的是一样的，都是通过独立按键来控制LED闪灭本质上是起到开关的作用，即调用函数和中断函数。但是写一篇太累了，我还是决定分为两篇写，这篇是调用函数篇。在本篇中你主要看到这些东西！！！1.调用函数的方法（主要讲语法和格式）2.独立按键如何控制LED亮灭3.程序中的一些细节（软件消抖等）1.调用函数的方法思路还是比较清晰地，就是通过按下按键来控制LED闪灭，即每按下一次，LED取反一次。重要的是，把按键与LED联系在一起。我打算用K1来作为开关，看了一下开发板原理图，K1连接的是单片机的P31口，当按下K1时，P31是与GND相连的，也就是说，当我按下去时

  9. ruby-on-rails - Rails - 从命名路由中提取 HTTP 动词 - 2

    Rails中有没有一种方法可以提取与路由关联的HTTP动词？例如，给定这样的路线:将“users”匹配到:“users#show”，通过:[:get,:post]我能实现这样的目标吗？users_path.respond_to?(:get)(显然#respond_to不是正确的方法)我最接近的是通过执行以下操作，但它似乎并不令人满意。Rails.application.routes.routes.named_routes["users"].constraints[:request_method]#=>/^GET$/对于上下文，我有一个设置cookie然后执行redirect_to:ba

  10. ruby-on-rails - 如何在 Rails 中设置路由的默认格式？ - 2

    路由有如下代码:resources:orders,only:[:create],defaults:{format:'json'}resources:users,only:[:create,:update],defaults:{format:'json'}resources:delivery_types,only:[:index],defaults:{format:'json'}resources:time_corrections,only:[:index],defaults:{format:'json'}是否可以使用1个字符串为所有资源设置默认格式，每行不带“默认值”散列？谢谢。

随机推荐