Famo.us IframeSurface

Question

我尝试在表面内实现 iframe。

/* globals define */
define(function(require, exports, module) {
'use strict';
// import dependencies
var Engine = require('famous/core/Engine');
var Modifier = require('famous/core/Modifier');
var Transform = require('famous/core/Transform');
var Surface = require('famous/core/Surface');
var mainContext = Engine.createContext();
var content = 'abc';
var logo = new Surface({
    size: [undefined, undefined],
    content: '<iframe width=1024 height=768 src="http://www.bbc.com"></iframe>'
});
var centerModifier = new Modifier({
  origin: [0, 0]
});
centerModifier.setTransform(Transform.scale(.5,.5,0));
mainContext.add(centerModifier).add(logo);
});

如果我缩放它，卷轴似乎会冻结。 任何人都在 Famou.us 中使用过 iframe 表面。 它尚未包含在库中。

Answer 1

看起来你正在缩放 z 无限小......

centerModifier.setTransform(Transform.scale(.5,.5,0));

应该改成..

centerModifier.setTransform(Transform.scale(.5,.5,1));

祝你好运！

Answer 2

您可以轻松创建新元素：

define(function(require, exports, module) {

    var Surface = require('famous/core/Surface');

    function IFrameSurface(options) {
        this._url = undefined;
        Surface.apply(this, arguments);
    }

    IFrameSurface.prototype = Object.create(Surface.prototype);
    IFrameSurface.prototype.constructor = IFrameSurface;
    IFrameSurface.prototype.elementType = 'iframe';
    IFrameSurface.prototype.elementClass = 'famous-surface';

    IFrameSurface.prototype.setContent = function setContent(url) {
        this._url = url;
        this._contentDirty = true;
    };

    IFrameSurface.prototype.deploy = function deploy(target) {
        target.src = this._url || '';
    };

    IFrameSurface.prototype.recall = function recall(target) {
        target.src = '';
    };

    module.exports = IFrameSurface;
});

用法：

new IFrameSurface({content: 'url here'})

Answer 3

前面提到的 z 变换是个问题。只是为了记录 iframe 在 famo.us 中可以正常工作。我正在使用多个动画 iframe 没有问题。几乎任何 HTML 都可以进入表面，因此实际上不需要专门的 iframe 表面。