Question

我需要结合SPFx Web部件和SharePoint 2016和InternetExplorer 11的一些专业知识。这个想法是创建一个使用Pannellum显示图像的Web部件。在Firefox中，它已经可以工作了。但是，对于IE11，错误消息将出现在控制台中：
SCRIPT5022: TypeMismatchError BaseURL.ts (16,7)

SCRIPT5007: Die Eigenschaft "toString" eines undefinierten oder Nullverweises kann nicht abgerufen werden.
英语留言：The "toString" property of an undefined or null reference cannot be retrieved. LogEvent.js (26,1)

在开发人员工具中，我可以看到图像已下载。但是当Webpart的代码尝试使用图像作为Blob对象调用createObjectURL时，它便崩溃了。

该Webpart是使用Yeoman（3.1.0）创建的，并使用Gulp进行了测试。在Webpart中执行Pannellum的脚本，我使用以下仓库中的executeScript函数：https://github.com/SharePoint/sp-dev-fx-webparts/blob/dev/samples/react-script-editor/src/webparts/scriptEditor/ScriptEditorWebPart.ts

我想我的问题必须与此有关：IE + XMLHttp + CreateObjectURL Error。

有人对此有经验吗？

下面是一些示例代码：

import { Version } from '@microsoft/sp-core-library';
import {
  BaseClientSideWebPart,
  IPropertyPaneConfiguration,
  PropertyPaneTextField
} from '@microsoft/sp-webpart-base';
import { escape } from '@microsoft/sp-lodash-subset';
import { SPComponentLoader } from '@microsoft/sp-loader';
import styles from './TestWebPart.module.scss';
import * as strings from 'TestWebPartStrings';

require('../../../node_modules/pannellum/build/pannellum.css');
require('../../../node_modules/pannellum/build/pannellum.js');

export default class TestWebPart extends BaseClientSideWebPart<ITestWebPartProps> {
  public render(): void {
    let innerHTML: string = `
    <script src="http://localhost:4321/node_modules/pannellum/build/pannellum.js"></script>
    <script>
      pannellum.viewer('panorama', {
        "type": "equirectangular",
        "panorama": "test2.jpg",
        "autoLoad": true
      });
    </script>
    <style>
      #panorama {
        width: 600px;
        height: 400px;
      }
    </style>
    <div id="panorama"></div>
    `;
    this.domElement.innerHTML = innerHTML;
    this.executeScript(this.domElement);
  }

  private evalScript(elem) {

    const data = (elem.text || elem.textContent || elem.innerHTML || '');
    const headTag = document.getElementsByTagName('head')[0] || document.documentElement;
    const scriptTag = document.createElement('script');

    scriptTag.type = 'text/javascript';
    if (elem.src && elem.src.length > 0) {
      return;
    }
    if (elem.onload && elem.onload.length > 0) {
      scriptTag.onload = elem.onload;
    }

    try {
      // doesn't work on ie...
      scriptTag.appendChild(document.createTextNode(data));
    } catch (e) {
      // IE has funky script nodes
      scriptTag.text = data;
    }

    headTag.insertBefore(scriptTag, headTag.firstChild);
    headTag.removeChild(scriptTag);
  }

  private nodeName(elem, name) {
    return elem.nodeName && elem.nodeName.toUpperCase() === name.toUpperCase();
  }

  // Finds and executes scripts in a newly added element's body.
  // Needed since innerHTML does not run scripts.
  //
  // Argument element is an element in the dom.
  private async executeScript(element: HTMLElement) {
    // Define global name to tack scripts on in case script to be loaded is not AMD/UMD

    if (!window['_spPageContextInfo']) {
      window['_spPageContextInfo'] = this.context.pageContext.legacyPageContext;
    }

    (<any>window).ScriptGlobal = {};

    // main section of function
    const scripts = [];
    const childrenNodes = element.childNodes;

    for (let i: number = 0; childrenNodes[i]; i++) {
      const child: any = childrenNodes[i];
      if (this.nodeName(child, 'script') &&
        (!child.type || child.type.toLowerCase() === 'text/javascript')) {
        scripts.push(child);
      }
    }

    const urls = [];
    const onLoads = [];
    for (let i: number = 0; scripts[i]; i++) {
      const scriptTag = scripts[i];
      if (scriptTag.src && scriptTag.src.length > 0) {
        urls.push(scriptTag.src);
      }
      if (scriptTag.onload && scriptTag.onload.length > 0) {
        onLoads.push(scriptTag.onload);
      }
    }

    let oldamd = undefined;
    if (window['define'] && window['define'].amd) {
      oldamd = window['define'].amd;
      window['define'].amd = undefined;
    }

    for (let i: number = 0; i < urls.length; i++) {
      try {
        let scriptUrl = urls[i];
        const prefix = scriptUrl.indexOf('?') === -1 ? '?' : '&';
        scriptUrl += prefix + 'cow=' + new Date().getTime();
        await SPComponentLoader.loadScript(scriptUrl, { globalExportsName: 'ScriptGlobal' });
      } catch (error) {
        if (console.error) {
          console.error(error);
        }
      }
    }
    if (oldamd) {
      window['define'].amd = oldamd;
    }

    for (let i: number = 0; scripts[i]; i++) {
      const scriptTag = scripts[i];
      if (scriptTag.parentNode) { scriptTag.parentNode.removeChild(scriptTag); }
      this.evalScript(scripts[i]);
    }
    // execute any onload people have added
    for (let i: number = 0; onLoads[i]; i++) {
      onLoads[i]();
    }
  }
}

Answer 1

我没有找到解决此问题的方法。甚至其他在IE11中充当独立解决方案的全景查看器，也无法在IE11，SharePoint 2016和SPFx Webpart的组合中使用。

每次使用iframe在Sharepoint中工作时。将其部署到SharePoint之后，由于异常而停止工作。大多数例外都与安全性有关。

最有前途的方法是将Photo Sphere Viewer用作iframe。那里的问题是图像必须与其他js和HTML文件一起放入CDN目录。否则，由于安全性和CORS（跨源资源共享）的原因，将会出现异常。

Answer 2

IE不支持URLSearchParams。在代码（Polyfill）中添加以下代码段，最好在Constructor（）中添加

：

(function (w) {

    w.URLSearchParams = w.URLSearchParams || function (searchString) {
        var self = this;
        self.searchString = searchString;
        self.get = function (name) {
            var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(self.searchString);
            if (results == null) {
                return null;
            }
            else {
                return decodeURI(results[1]) || 0;
            }
        };
        self.has = function (name) {
            var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
            if (results == null) {
                return false;
            }
            else {
                return true;
            }
        }
    }

})(window);

将SPFx Webpart与IE11，SharePoint 2016和Pannellum一起使用

2 个答案: