猫史档案馆

我使用Waddle（其实是为了方便，我会JS）做了个【增强网页框】，解决了原生网页框无法在框架内打开新网页的问题（想必做浏览器的都深有感受吧）。【开始加载】事件有些问题，望各位大佬能给看看。源代码如下：

 

const types = {
  isInvisibleWidget: false,
  type: "WCF_SAMEFRAME_PAGEBOX_WIDGET",
  icon: "https://waddle.coco-central.cn/static/img/logo/logo-white.svg",
  title: "增强网页框",
  version: "1.0.0",
  isGlobalWidget: false,
  properties: [
    {
      key: '__width',
      label: '宽度',
      valueType: 'number',
      defaultValue: 360,
      blockOptions: {
        generateBlock: false,
      },
    },
    {
      key: '__height',
      label: '高度',
      valueType: 'number',
      defaultValue: 200,
      blockOptions: {
        generateBlock: false,
      },
    },
    {
      key: '__size',
      label: '',
      valueType: 'number',
      defaultValue: 0,
      readonly: true,
      blockOptions: {
        setter: {
          keys: ['__height', '__width'],
        },
        getter: {
          keys: ['__height', '__width'],
        },
      },
    },
  ],
  methods: [],
  events: [],
};

class Widget extends VisibleWidget {
  constructor(props) {
    super(props);
    this.__width = props.__width;
    this.__height = props.__height;
    this.widgetLog('WCF匠心制作【增强网页框】，开源免费，使用或再创作需注明作者为【WCF】。');
  this.url=props.url;

  }
  render() {
    return(
      React.createElement("iframe", {  style: {  width: (this.__width),
        height: (this.__height),
      },
      src: (this.url),
      target: "_self",
      onLoadStart: this.onLoadStart.bind(this),
      onLoad: this.onLoad.bind(this),
      onError: this.onError.bind(this),
    }, null)
  );

  }
}

types['properties'].push({
    key: 'url',
    label: 'URL',
    valueType: 'string',
    defaultValue: 'https://m.baidu.cn',

})

types['events'].push({
    key: 'onLoadStart',
    label: '开始加载',
    params: [],

})
Widget.prototype.onLoadStart = function (event) {
      this.emit("onLoadStart");
}

types['events'].push({
    key: 'onLoad',
    label: '加载完成',
    params: [],

})
Widget.prototype.onLoad = function (event) {
      this.emit("onLoad");
}

types['events'].push({
    key: 'onError',
    label: '加载失败',
    params: [],

})
Widget.prototype.onError = function (event) {
      this.emit("onError");
}

exports.types = types;
exports.widget = Widget;