Electron使用指南—打开网站窗口

r囧r小猫 2023-10-06 14:41 52阅读 0赞

点击一个条目，根据获取到的网站 `URL` 信息，打开网站窗口。

#### 1、修改 Main.vue ####

在 `/src/components/Main.vue` 组件里，给每个条目添加双击事件，双击后打开网站窗口，同时注入一段 `JS` 代码：

<template>
      <main>
        // ...
        <div id="items">
          <div 
            // ...
            @dblclick="open(item.url, index)"
          >
            // ...
          </div>
        </div>
      </main>
    </template>
    
    <script>
    
    // ...
    
    import buttonJS from './button' 
    
    export default {
      // ...
      methods: {
    
        // ...
    
        open(url, index) {
          let readerWin = window.open(url, '', `
            maxWidth=2000,
            maxHeight=2000,
            width=1250,
            height=800,
            backgroundColor=#dedede,
            nodeIntegration=1,
            contextIsolation=1
          `)
    
          readerWin.eval(buttonJS)
        }
      }
    }
    </script>

#### 2、Button.js ####

创建 `/src/components/button.js`，编写要注入的 `JS` 代码：

export default `
      alert('hello.')

发表评论取消回复

表情：

评论列表（有 0 条评论，52人围观）

还没有评论，来说两句吧...

相关阅读

相关 Electron使用指南——删除信息

在打开的窗口里注入按钮，点击按钮关闭窗口，同时删除相应的条目。 1、在打开的窗口中注入按钮修改 `/src/components/button.js`，编写创建的按钮

柔光的暖阳◎/ 2023年10月06日 14:42/ 0 赞/ 56 阅读

相关 Electron使用指南—打开网站窗口

点击一个条目，根据获取到的网站 `URL` 信息，打开网站窗口。 1、修改 Main.vue 在 `/src/components/Main.vue` 组件里，给每个条

r囧r小猫/ 2023年10月06日 14:41/ 0 赞/ 53 阅读

相关 Electron使用指南—显示列表

屏幕快照的图片获取生成以后，将返回的信息显示在列表里。 1、重新规划 Store 重新规划 Store, 使用 `Vuex` 模块来分开管理数据。在 `/src/sto

爱被打了一巴掌/ 2023年10月06日 14:39/ 0 赞/ 16 阅读

相关 Electron使用指南—IPC 通信

IPC 通信 1、index.html <!DOCTYPE html> <html> <head> <meta char

以你之姓@/ 2023年10月06日 14:37/ 0 赞/ 56 阅读

相关 Electron使用指南 - [01] 介绍

Electron 介绍 1、概览想必你已经听说了可以应用electron来构建令人惊叹的桌面应用程序！ ![9b265ee857754954a135efb2ff

拼搏现实的明天。/ 2023年10月06日 14:35/ 0 赞/ 58 阅读

相关 Electron使用指南——搜索信息

搜索信息的思路：在 `/src/components/Header.vue` 组件里获取到用户从搜索框里的关键字(keyword)，保存在 `Store` 里，再做个 `get

小灰灰/ 2022年12月03日 15:58/ 0 赞/ 210 阅读

相关 Electron使用指南——14打开网站窗口

点击一个条目，根据获取到的网站 `URL` 信息，打开网站窗口。 1、修改 Main.vue 在 `/src/components/Main.vue` 组件里，给每个条

逃离我推掉我的手/ 2022年12月03日 08:45/ 0 赞/ 232 阅读

相关 Electron使用指南——删除信息

在打开的窗口里注入按钮，点击按钮关闭窗口，同时删除相应的条目。 1、在打开的窗口中注入按钮修改 `/src/components/button.js`，编写创建的按钮

àì夳堔傛蜴生んèń/ 2022年12月03日 08:45/ 0 赞/ 271 阅读

相关 Electron使用指南——IPC 通信

IPC 通信 1、index.html <!DOCTYPE html> <html> <head> <meta char

今天药忘吃喽~/ 2022年12月02日 00:43/ 0 赞/ 180 阅读

相关 Electron使用指南 - [01] 介绍

Electron 介绍 1、概览想必你已经听说了可以应用electron来构建令人惊叹的桌面应用程序！ ![format_png][] 单纯使用JavaScr

素颜马尾好姑娘i/ 2022年12月01日 14:08/ 0 赞/ 249 阅读