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 surface。它还没有包含在库中。

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图面。