Angular-Cli - 使用裁剪的iframe构建仪表板

Question

目标

我正在尝试为我们公司构建KPI（关键绩效指标）信息中心。

我探索了各种仪表板软件，如Geckoboard，但是开箱即用的集成并不能很好地提供数据。有些工具有很好的API选项，但这需要我们公司的大笔投资，而这些投资还没有准备好承诺。

方法

我的方法是使用我们的关键软件工具中的仪表板，如Jira，Confluence，Aha！，Google Analytics。

我打算做的是制作单页信息中心，它们会使用浏览器标签中的Chrome扩展程序在彼此之间循环。

每个页面都需要来自各种工具的数据，例如，来自Jira的小部件，来自Github的Pull请求，来自Google Analytics的Live Users，google docs等。

执行

加载数据时我有两个选择，两者都需要iframe。

选项1：DIV中的下一个iframe，使用overflow：hidden设置div的样式，并使用IFRAME上的边距裁剪页面。

example

选项2：使用JQuery将DIV #ID从页面拉到IFrame中，请参阅：

Example

技术

我想用Angular 2构建这些单页，因为我喜欢使用angular-cli工具，我们的公司也选择了MVC。

我可以使用选项1，但我无法保证我想要裁剪的数据始终位于同一位置。我一直在使用选项2，但得到....

错误：

localhost/:1 XMLHttpRequest cannot load URL. Redirect from 'URL' to 'URK' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

问询

使用Iframe一直很艰难，我正在寻找一个很好的参考，我正在尝试做什么。我作为一名设计师工作，所以不具备丰富的编程知识，如果有人能够提供一个很好的描述，我将如何将IFrames片段添加到只在本地提供的角度应用程序中，将非常感激

当前代码：

dashboard.component.ts

import { Component, AfterViewInit } from '@angular/core';
declare var $:any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements AfterViewInit {
  title = 'Dashboard!';
    constructor() {
   }

  ngOnInit() {
  }

  ngAfterViewInit() {
      $('#daysRemaining').load('URL #gadget-17301');
  }
}

DOM

<h1>Title</h1>
<iframe id="daysRemaining"></iframe>

注意：JQuery CDN在index.html中加载