Question

我有一个应该将window.location.origin复制到剪贴板以供用户粘贴的功能：

  <OptionButton
    onClick={() => this.copyLink(`${window.location.origin}/calc/${apiId}/${formatScenarioName(database.api.scenarioName || database.inputs.scenarioName)}`)}
  >
    Copy Link
  </OptionButton>



  copyLink(value) {
    const tempInput = document.createElement('input')
    tempInput.style = 'position: absolute; left: -1000px; top: -1000px'
    tempInput.value = value
    document.body.appendChild(tempInput)
    tempInput.select()
    document.execCommand('copy')
    document.body.removeChild(tempInput)
    message.success('Link copied to clipboard!')
  }

尽管此方法可在任何其他浏览器上使用，但在IE11上失败。我已经尝试过合并react路由器，但是要求是拥有完整的链接，而不仅仅是参数。但是，我也尝试过一种解决方法，就是简单地添加window.location.href，但这不是很动态。

在IE11上是否有用于此的polyfill？或对此的解决方法？

Answer 1

过去我搜索polyfill时，这响了一下。

我在整个代码库中都使用了某些东西，因此您可能需要进行一些小改动才能适应React：

/**
  * Polyfill for window.location
  * @inner {string} origin fix IE11 on windows 10 issue
  * @inner {string} hash fix # inconsistency
  * @return {Object<Location>} window.location
  * @see https://connect.microsoft.com/IE/feedback/details/1763802/location-origin-is-undefined-in-ie-11-on-windows-10-but-works-on-windows-7
  * @see https://stackoverflow.com/questions/1822598/getting-url-hash-location-and-using-it-in-jquery
  */
    location: (function (loc) {
        return loc.origin
            ? loc
            : (function () {
                var origin =
                    loc.protocol + '//' + loc.hostname + (loc.port ? ':' + loc.port : ''),
                    hash = loc.hash.replace('#', '');

                try {
                    Object.defineProperty(loc, {
                        origin: {
                            value: origin,
                            enumerable: true
                        },
                        hash: {
                            value: '#' + hash,
                            enumerable: true
                        }
                    });
                } catch (e) {
                    loc.origin = origin;
                    loc.hash = hash;
                }

                return loc;
            })();
    })(window.location),

Answer 2

您的错误来自样式分配。

tempInput.style = 'position: absolute; left: -1000px; top: -1000px'

在“严格”模式下，您应该不能使用CSS文本格式编写多个值来设置样式。大多数浏览器不强制执行此操作，但IE 11强制执行。

我怀疑您的控制台将其报告为：

SCRIPT5045在严格模式下不允许分配只读属性

如果要处理已经具有样式的元素，则可能要分别设置每个属性，但是有一种方法可以完全替换任何现有样式。因为您是在临时元素上设置的，所以可以使用cssText：

tempInput.style.cssText = 'position: absolute; left: -1000px; top: -1000px'

那应该在浏览器之间兼容。

有关更多参考，请参见ElementCSSInlineStyle.style

IE11：无法将window.location.origin复制到剪贴板中

2 个答案: