我想放置一个脚本标签

Question

gatsby.js v4.4.0

我想设置脚本标签。但是，我收到一个错误，无法设置。

请告诉我如何安装它。

 <script type="module" src="https://unpkg.com/x-frame-bypass"></script>
 <script src="https://unpkg.com/@ungap/custom-elements-builtin"></script>

错误代码将显示在您的浏览器中。

Error in function customElements.define.extends.load in x-frame-bypass.js: X-Frame-Bypass src does not start with http(s)://

x-frame-bypass.js: No codeFrame could be generated

html.js

import React from "react"
import PropTypes from "prop-types"

export default function HTML(props) {
  return (
    <html {...props.htmlAttributes}>
      <head>
        <meta charSet="utf-8" />
        <meta httpEquiv="x-ua-compatible" content="ie=edge" />
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no"
        />
        {props.headComponents}
  <script type="module" src="https://unpkg.com/x-frame-bypass"></script>
        <script src="https://unpkg.com/@ungap/custom-elements-builtin"></script>
      </head>
      <body {...props.bodyAttributes}>
        {props.preBodyComponents}
        <div
          key={`body`}
          id="___gatsby"
          dangerouslySetInnerHTML={{ __html: props.body }}
        />
        {props.postBodyComponents}
      </body>
    </html>
  )
}

HTML.propTypes = {
  htmlAttributes: PropTypes.object,
  headComponents: PropTypes.array,
  bodyAttributes: PropTypes.object,
  preBodyComponents: PropTypes.array,
  body: PropTypes.string,
  postBodyComponents: PropTypes.array,
}

html.js

Answer 1

you shouldn't have an html tag in react

同意，但是，在这种情况下，他使用的是 HTML customization of Gatsby。

正在提示的错误：

Error in function customElements.define.extends.load in x-frame-bypass.js: X-Frame-Bypass src does not start with http(s)://

x-frame-bypass.js: No codeFrame could be generated

表示脚本加载成功

如果您查看正在请求的 URL (https://unpkg.com/x-frame-bypass@1.0.2/x-frame-bypass.js)，您将看到 customElements.define 和抛出的异常：

if (!url || !url.startsWith('http'))
    throw new Error(`X-Frame-Bypass src ${url} does not start with http(s)://`)
console.log('X-Frame-Bypass loading:', URL)

这可能是一个 localhost 问题。一旦站点部署到自定义域，它就应该消失。

另外，根据docs，脚本的顺序应该倒过来：

 <script src="https://unpkg.com/@ungap/custom-elements-builtin"></script>
 <script type="module" src="https://unpkg.com/x-frame-bypass"></script>

第一个（可选）是：

 <script src="https://unpkg.com/@ungap/custom-elements-builtin"></script>

完成后，您只需加载具有is="x-frame-bypass"属性的iframe：

<iframe
    is="x-frame-bypass"
    src="https://whosebug.com/"
    height="100%"
    width-"100%"
 />

我想放置一个脚本标签

I want to place a script tag

javascript

reactjs

gatsby