修改聚合物的采样器基架以加载自定义元素而不是 iframe

Modifying Polymer's sampler-scaffold to load custom elements instead of iframes

本文关键字：元素 自定义 iframe 加载 聚合物 采样器 修改      更新时间：2023-09-26

我喜欢Google Polymer <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>，不再加载 iframe？

如果不是 - 我仍然可以使用 Polymer 的 <sampler-scaffold> 元件和 iframe 实现数据密集型应用吗？

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

HTML

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

.JS

  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();
  },

索引.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。

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

玩得开心:)！

相关文章：