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

逃离我推掉我的手 2022-12-03 08:45 234阅读 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 条评论，234人围观）

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

相关阅读

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

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

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

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

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

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

相关 Electron使用指南—IPC 通信

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关 JavaScript权威指南_107_第14章_Window对象_14.8-多窗口和窗体-打开和关闭窗口

![Center][] [Center]: /images/20220805/bd9dfcdf44e34e50b346eefe5eeee054.png

矫情吗；*/ 2022年08月07日 17:52/ 0 赞/ 134 阅读