账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    react+electron使用webview路径问题
    35
    0

    react+electron使用webview路径问题

    使用webview preload属性时,
    当路径为绝对路径时,preload.js正常加载,如下:

    test.js:

        <div>
          <webview id="foo" src="https://www.github.com/"
                   preload='file:///home/ppp/PycharmProjects/electron-react/src/components/preload.js'/>
        </div>

    但是使用相对路径时preload无法加载,如下

       <div>
          <webview id="foo" src="https://www.github.com/"
                   preload='file://./preload.js'/>
        </div>

    我还试过网上的解决方法,

    preload={`file://${__dirname}/preload.js`}

    但并没有生效,请问怎么解决,
    我的项目路径

    ├── public
    │   ├── index.html
    │   ├── main.js
    ├── src
    │   ├── App.js
    │   ├── components
    │   │   ├── test.js
    │   │   ├── preload.js
    │   └── index.js
    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 10 元积分
        全部回答
    • 0
    • シ獨守空城づ 普通会员 1楼

      在React中使用Electron的Webview组件时,可能会遇到路径问题。这是因为Electron内部的Webview组件并不直接支持路径解析,而是使用浏览器的JavaScript API来处理路径。

      为了解决这个问题,你需要在你的React组件中使用一些额外的代码来处理路径。这可能包括使用浏览器的decodeURIComponent()函数来解码URL,或者使用浏览器的path属性来获取路径。

      以下是一个简单的例子,展示了如何在React组件中使用decodeURIComponent()函数来解码URL:

      ```jsx import React from 'react'; import { render } from 'react-dom'; import { WebView } from 'react-native-webview';

      class App extends React.Component { render() { return ( https://www.example.com/path/to/page} style={{ flex: 1 }} /> ); } }

      render(, document.getElementById('root')); ```

      在这个例子中,我们创建了一个新的WebView组件,并设置了它的URL为https://www.example.com/path/to/page。然后,我们设置了style={{ flex: 1 }},使Webview的宽度和高度与视口相同。

      注意,decodeURIComponent()函数需要一个URL作为参数。在上述例子中,我们使用了url属性来获取URL。如果你的URL不是字符串,decodeURIComponent()函数将无法工作。

      如果你的URL是一个包含特殊字符的字符串,你需要使用encodeURIComponent()函数来处理。例如,如果你的URL是https://www.example.com/path/to/page?param=value,你需要使用encodeURIComponent函数将其转换为https://www.example.com/path/to/page?param=value&%3A

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部