在Electron应用程序中从外部站点加载div

Question

TLDR:如何在Electron应用程序中显示#div来自另一个URL.

我正在学习javascript而且我遇到过这个问题.我想从电子应用程序中的另一个网站加载特定的div.已经尝试在线寻找解决方案并阅读文档,但失败了.我尝试过使用javascript:

$("#test_div-in_electron").load("https://some-website.com #test-div-on-webpage")

使用index.html中的脚本:

<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
<script src="../app/resources/js/renderer_main.js"></script>
<script>if (window.module) module = window.module;</script>

它显示 - 没有.空白div.

Answer 1

你在做什么叫做Cross Origin Request:

Web应用程序在请求资源>具有与其自己的源不同的源(域,协议和端口)时,会发出跨源HTTP请求.

跨源请求的示例:来自http://domain-a.com的Web应用程序的前端JavaScript代码使用XMLHttpRequest来请求http://api.domain-b.com/data.json.

出于安全原因,浏览器限制从脚本内发起的跨源HTTP请求.例如,XMLHttpRequest和Fetch API遵循同源策略.这意味着使用这些API的Web应用程序只能从加载应用程序的同一源请求HTTP资源,除非来自其他来源的响应包含正确的CORS标头.

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

在Electron中,您可以在打开主窗口时禁用此安全性:

new BrowserWindow({
  ..
  webPreferences: {
    ..
    webSecurity: false
  }
});