如何在 iframe 上加载 html 时转义 (')quote 或 (") 双引号

Question

我有一个 HTML 文件发送到我的 React 应用程序，然后我尝试使用 iframe 渲染它。问题是发送的 HTML 文件同时包含 (') 单引号和 (") 双引号，导致渲染失败。

var template = (report) => {
    return ({__html: "<iframe srcDoc='"+ report +"'  width='100%' height='100%'></iframe>"})
};

这是我当前用于渲染 iframe 的实现，report 我从

async function  fetchReport(id)  {
  const response = await fetch(`${process.env.REACT_APP_REPORT_FINDER_SERVICE_URL}/reports/${id}`, {
    method: 'GET', // *GET, POST, PUT, DELETE, etc.
    mode: 'cors', // no-cors, *cors, same-origin
    headers: {
      'Content-Type': 'text/html',
      'Authorization': `Bearer ${localStorage.getItem('idToken')}`
    },
  })

  return response.text();
};

请注意，我无法在 iframe 上为 src 使用 URL，因为我需要设置授权 header。现在我在如何解决如何在 iframe 上呈现 HTML 文件的问题上走到了死胡同。任何帮助将不胜感激。

Answer 1

为此使用 react-srcdoc-iframe。

Codesandbox：https://codesandbox.io/s/mystifying-worker-1t258?file=/src/App.js

如何在 iframe 上加载 html 时转义 (')quote 或 (") 双引号

How to escape (')quote OR (") double quotes on loading html on iframe

javascript

html

reactjs

iframe

src