修改 Polymer 的 sampler-scaffold 以加载自定义元素而不是 iframe答案

【问题标题】：Modifying Polymer's sampler-scaffold to load custom elements instead of iframes修改 Polymer 的 sampler-scaffold 以加载自定义元素而不是 iframe
【发布时间】：2015-01-21 22:49:47
【问题描述】：

我喜欢 Google Polymer 的 <sampler-scaffold> 的外观和过渡效果

您可以在聚合物网站上看到它的实际效果：sampler-scaffold

我想将它用于单页应用程序 (SPA)，并希望将我的自定义元素加载到脚手架中，而不是加载与我的 SPA 模型无关的无关 iframe。

实际的交换发生在他们的代码中：

frameLoaded: function() {
    if (!this.item) {
      return;
    }
    this.$.frame.contentWindow.addEventListener('polymer-ready', function() {
      setTimeout(this.updateFrameHeight.bind(this), 100);
      this.$.frame.contentWindow.addEventListener('core-resize',
        this.boundResizeFrame, false);
    }.bind(this));
  },

以及被操作的 DOM 对象：

<!-- main content -->
<div id="frameContainer">
    <iframe id="frame" on-load="{{frameLoaded}}"></iframe>
</div><!-- End main content -->

我试图做的是用内容元素替换 iframe 元素并将我的自定义元素加载到内容标签中，但是页面根本不加载向上滑动的主面板并且没有记录任何错误。此外，还有一些辅助函数可以在 iframe 加载后调整框架高度。你可以在这里查看<sampler-scaffold>的源代码：

sampler scaffold source

有没有人修改 <sampler-scaffold> 以防止加载 iframe？

如果不是 - 我仍然可以使用聚合物的 <sampler-scaffold> 元素和 iframe 实现数据密集型应用程序吗？

当我尝试连接到我的数据库并通过 HTTP 发送实时统计数据时，我担心加载 iframe 而不是页面/元素只会让我头疼

【问题讨论】：

标签： javascript html iframe polymer web-component

【解决方案1】：

HTML

<!-- main content -->
<div id="frameContainer">
<content select=".testpage" fit></content>
</div><!-- End main content -->

  ready: function() {
    window.addEventListener('hashchange', this.parseLocationHash.bind(this));
  },

  domReady: function() {
    this.async(function() {
      this.parseLocationHash();
    }, null, 300);
  },

  parseLocationHash: function() {
    var route = window.location.hash.slice(1);
    for (var i = 0, item; item = this.$.menu.items[i]; i++) {
      if (item.getAttribute('tag') === route) {
        this.$.menu.selected = i;
        return;
      }
    }
    this.$.menu.selected = this.$.menu.selected || 0;
  },

  menuSelect: function(e, detail) {
    if (detail.isSelected) {
      this.item = detail.item;
      if (this.item.children.length) {
        this.item.selected = 0;
      }

      this.item.tag = this.item.getAttribute('tag');
      var url = this.item.getAttribute('url');
      window.location.hash = this.item.tag;

      if (this.narrow) {
        this.$.drawerPanel.closeDrawer();
      } else {
        this.animateCard();
      }
    }
  },

  animateCard: function() {
    this.$.card.classList.remove('move-up');
    this.$.card.style.display = 'none';
    this.async(function() {
      this.$.card.style.display = 'block';
      this.moveCard(this.$.mainHeaderPanel.offsetHeight);
      this.async(function() {
        this.$.card.classList.add('move-up');
        this.moveCard(null);
      }, null, 300);
    });
  },

  moveCard: function(y) {
    var s = this.$.card.style;
    s.webkitTransform = s.transform = 
        y ? 'translate3d(0, ' + y + 'px,0)' : '';
  },

  cardTransitionDone: function() {
    if (this.$.card.classList.contains('move-up')) {
      this.$.card.classList.remove('move-up');
    }
  },

  togglePanel: function() {
    this.$.drawerPanel.togglePanel();
  },

index.html

<custom-element class="testpage"></custom-element>

      <div class="testpage" style="margin: 20px;"> Augue duis dolore te feugait nulla, facilisi nam liber tempor cum soluta nobis eleifend option. Legere me lius quod ii legunt saepius claritas est. Exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Humanitatis per seacula quarta decima et quinta decima eodem modo typi. Insitam est usus legentis in iis qui facit eorum. Litterarum formas qui nunc nobis videntur parum clari fiant sollemnes in? Nostrud ea commodo consequat duis autem vel eum iriure dolor in hendrerit in vulputate velit esse?</div>

现在加载标准元素和自定义元素，而不是任何外部 iframe。

【讨论】：

你能分享更多代码吗？ sampler-scaffold 标签里面有什么，如何连接特定的菜单项来加载一些自定义元素？
polymer 对我们的应用来说太 BETA 了 - 我们决定使用 onsen.io 来开发面向前端移动的框架
@Dan 你有修改后的采样器支架的工作样本吗？多个页面之间的切换是如何工作的？

【解决方案2】：

我不太确定您到底想要达到什么目的。但我确实知道一个非常好的 SPA 教程。只需在聚合物项目网站上查看this article！

玩得开心:)！

【讨论】：