Electron: كيف يمكنني فتح عنوان url من <a>متصفح OS الافتراضي؟</a>

تم إنشاؤها على ١ أبريل ٢٠١٥  ·  26تعليقات  ·  مصدر: electron/electron

التعليق الأكثر فائدة

لقد وجدت مقتطف الشفرة هذا في SO:

    var shell = require('electron').shell;
    //open links externally by default
    $(document).on('click', 'a[href^="http"]', function(event) {
        event.preventDefault();
        shell.openExternal(this.href);
    });

أسقطته في ملف الفهرس الرئيسي الخاص بي ، يبدو أنه يعمل بقدر ما أستطيع أن أقول ، حتى بالنسبة للروابط التي تم إنشاؤها ديناميكيًا. أنا مستاء للغاية من الإلكترون لمعرفة ما إذا كان هناك أي عيوب لهذا يجب أن أحذر منها. أفكار؟

ال 26 كومينتر

عند الإعداد ، جربت كلاً من shell.openExternal('http://example.com') و shell.openItem('http://example.com') وفتح كلاهما موقع الويب في الخلفية.

انتهى بي الأمر باستخدام child_process.execSync('start http://example.com') على Win32 و child_process.execSync('open http://example.com') على Darwin لذلك يظهر المتصفح بالفعل ويحصل على التركيز.

في Linux ، يمكنك استخدام xdg-open:
child_process.execSync('xdg-open http://example.com')

لقد قررت بالفعل استخدام فتح العقدة . يجب أن تجربها إذا كنت لا تريد العبث بالهروب وكذا.

يا رفاق ، لكن حلولكم رائعة ، لكني أتساءل عن كيفية اعتراض محاولة فتح عنوان url مثل " http://someurl.com " ثم فتحها باستخدام shell.openExternal ؟ يسمح عامل الخدمة بالتقاط الطلبات فقط للملفات الموجودة على نفس المجال. هل هناك قدرة على فعل هذا؟ تضمين التغريدة

نفس السؤال هنا مثل havenchyk ، هل هناك طريقة لإخبار الإلكترون بفتح الروابط الخارجية افتراضيًا؟

إذا كان تطبيقك يستخدم نافذة واحدة فقط ، ويمكنك ضمان فتح كل رابط خارجي في تطبيقك في نافذة جديدة (على سبيل المثال ، target="_blank" ) ، يمكنك القيام بشيء مثل:

webContents.on('new-window', function(event, url){
  event.preventDefault();
  open(url);
});

حيث webContents هي محتويات الويب الرئيسية الخاصة بك في BrowserWindow و open هي وظيفة تفتح عنوان url في متصفحك (أستخدم node-open على النحو الموصى به من قبل AlicanC).

سيكون من الجيد أن يكون هناك حدث تم إطلاقه عند النقر فوق أي رابط ، لذلك يمكن للتطبيق تحديد ما إذا كان يجب فتحه في المتصفح ، لكنني لم أجد مثل هذا الحدث إذا كان موجودًا.

لقد وجدت مقتطف الشفرة هذا في SO:

    var shell = require('electron').shell;
    //open links externally by default
    $(document).on('click', 'a[href^="http"]', function(event) {
        event.preventDefault();
        shell.openExternal(this.href);
    });

أسقطته في ملف الفهرس الرئيسي الخاص بي ، يبدو أنه يعمل بقدر ما أستطيع أن أقول ، حتى بالنسبة للروابط التي تم إنشاؤها ديناميكيًا. أنا مستاء للغاية من الإلكترون لمعرفة ما إذا كان هناك أي عيوب لهذا يجب أن أحذر منها. أفكار؟

أنا أستخدم هذا الجزء من الكود:

var handleRedirect = (e, url) => {
  if(url != webContents.getURL()) {
    e.preventDefault()
    require('electron').shell.openExternal(url)
  }
}

webContents.on('will-navigate', handleRedirect)
webContents.on('new-window', handleRedirect)

أعلن أولاً عن عملية تفرخ

"app.controller ('GuideCtrl'، ['$ range'، ($ range) => {
const تفرخ = تتطلب ('عملية_الأطفال'). تفرخ ؛

  $scope.openBrowser=(url)=>{
     let exec = spawn('explore', [url], {});
     exec.stdout.on('data', (data)=> {
        console.log('stdout: ' + data)
     });
  }

}]) `

وقبل استدعاء الطريقة

<a ng-click="openBrowser('https://google.com')">Goto google</a>

هل لدى shell.openExternal أي مشاكل أمنية؟ على سبيل المثال ، إذا خرجت الروابط من الشبكة ، فسيتم تمرير بيانات الشبكة الأولية إلى shell.openExternal أو أي من الوظائف الأخرى المذكورة أعلاه. هل يتأكد shell.openExternal من عدم حدوث أي شيء سيء؟ هل أحتاج إلى تصفية المخططات؟

استنادًا إلى الكود من rubencodes ، استخدمت:

const shell = require('electron').shell; $('.open-in-browser').click((event) => { event.preventDefault(); shell.openExternal(event.target.href); });

ثم عليك فقط إسقاط فئة "فتح في المتصفح" لكل عنصر تريد فتحه في المتصفح.

هذه واحدة لا تتطلب JQuery ، في حال كان أي شخص آخر يبحث عنها. سيفتح تلقائيًا أي رابط يبدأ بـ "http" في المتصفح الخارجي.

ضع هذا في عملية العارض الخاصة بك:

// Open all links in external browser
let shell = require('electron').shell
document.addEventListener('click', function (event) {
  if (event.target.tagName === 'A' && event.target.href.startsWith('http')) {
    event.preventDefault()
    shell.openExternal(event.target.href)
  }
})

إذا كنت تريد فتح علامات ALL <a> في المتصفح الافتراضي ، فجرب هذا في main.ts:

const shell = require('electron').shell;

mainWin.webContents.on('will-navigate', (event, url) => {
  event.preventDefault()
  shell.openExternal(url)
});

هذا يفترض أن لديك تطبيق صفحة واحدة مثلي. إذا لم يكن الأمر كذلك ، فستحتاج إلى إجراء بعض التعقيم الإضافي.

أريد فقط أن أكرر أن استخدام هذا مع محتوى المستخدم بدون قائمة بيضاء ربما يكون ثغرة أمنية كبيرة. لا أعرف ما الذي تفعله جميع المخططات المختلفة وما هي مدخلاتها ، ولكن فقط كمثال بسيط ، رابط مثل هذا

 <a href="imessage:hello">click me</a>

سوف يطالب المستخدم في Chrome و Safari على macOS ولكن مع الرمز أعلاه سيفتح Electron التطبيق.

يكاد يبدو أن على Electron نفسها أن تكون أكثر أمانًا هنا بدلاً من ترك الأمر لكل مبرمج فردي لمعرفة كيفية جعله آمنًا بمفرده.

على الأقل ربما تريد شيئًا مثل

function isSafeishURL(url) {
  return url.startsWith('http:') || url.startsWith('https:');
}

mainWin.webContents.on('will-navigate', (event, url) => {
  event.preventDefault();
  if (isSafeishURL(url)) {
    shell.openExternal(url);
  }
});

greggman راجع نوع الإذن الخارجي المفتوح في https://electronjs.org/docs/api/session#sessetpermissionrequesthandlerhandler

يمكنك حظر هؤلاء 👍

مرحبًا ، أنا أستخدم vue.js وأحل هذه المشكلة المستوحاة من المناقشة أعلاه ، في حالة وجود شخص مثلي يستخدم vue أيضًا لديه نفس المشكلة ، فأنا ألصق الكود الخاص بي هنا.

<template>
<div class="board-item" v-for="element in list" :key="element.id">
<span><a class='board-item-a' :href='element.url' target='_blank'>{{element.title}}</a></span>
</div>
</template>

<script>
mounted () {
this.$el.querySelectorAll('.board-item-a').forEach(a => {
a.addEventListener('click', (e) => {
e.preventDefault()
require('electron').shell.openExternal(e.target.href)
})
})
},
</script>

بناءً على تعليق alangrainger - إصدار TS:

const {app, shell, BrowserWindow} = require('electron');

...
mainWindow.webContents.on('new-window', function(event, url){
   event.preventDefault();
   shell.openExternal(url);
});

ماذا عن عناوين URL للبيانات؟

إصدار Angular 7 (مع عمليات إعادة تحميل مباشرة):

        const openExternalLinksInOSBrowser = (event, url) => {
            if (url.match(/.*localhost.*/gi) === null && (url.startsWith('http:') || url.startsWith('https:'))) {
                event.preventDefault();
                shell.openExternal(url);
            }
        };
        win.webContents.on('new-window', openExternalLinksInOSBrowser);
        win.webContents.on('will-navigate', openExternalLinksInOSBrowser);

يعد الجزء url.match(/.*localhost.*/gi) === null ضروريًا لأنه بخلاف ذلك عندما تقوم بتغيير شيء ما في التطبيق الزاوي الخاص بك ، فإنه سيفتح نافذة / علامة تبويب جديدة في متصفح نظام التشغيل لديك بدلاً من إعادة تحميله في تطبيق الإلكترون.

تعمل جميع الطرق بشكل جيد ولكن فقط في تطبيق غير الجذر الإلكتروني ، ما الذي يمكنني استخدامه لفتح عنوان url خارجي على متصفح نظام التشغيل الافتراضي في عملية رفع الجذر؟

أردت فقط نشر إجابة لمستخدمي Vue.js الآخرين.

<template>
  <div>
    <a href="https://google.com" target="_blank" @click.prevent="openExternalBrowser">Google.com Status</a>
  </div>
</template>

<script>
const { remote } = require('electron');

export default {
  name: 'HelloWorld',
  methods: {
    openExternalBrowser(e) {
      remote.shell.openExternal(e.target.href);
    },
  },
};
</script>

أردت فقط نشر إجابة لمستخدمي Vue.js الآخرين.

<template>
  <div>
    <a href="https://google.com" target="_blank" @click.prevent="openExternalBrowser">Google.com Status</a>
  </div>
</template>

<script>
const { remote } = require('electron');

export default {
  name: 'HelloWorld',
  methods: {
    openExternalBrowser(e) {
      remote.shell.openExternal(e.target.href);
    },
  },
};
</script>

شكرا لك.

على main.js :

app.on('web-contents-created', (e, contents) => {
    contents.on('new-window', (e, url) => {
      e.preventDefault();
      require('open')(url);
    });
    contents.on('will-navigate', (e, url) => {
      if (url !== contents.getURL()) e.preventDefault(), require('open')(url);
    });
});

تحتاج إلى تثبيت الحزمة المفتوحة :

npm i open --save

أردت فقط نشر إجابة لمستخدمي Vue.js الآخرين.

@ travis5491811 هذا يفتح نافذة إلكترون أخرى بالصفحة اليمنى. هل هذا التصرف المتوقع؟

لا ، عند التنفيذ بشكل صحيح ، يجب أن يجيب المنشور الخاص بي على بطاقة الموضوع "كيف يمكنني فتح عنوان url من متصفح نظام التشغيل الافتراضي " ، ولكن لمستخدمي vue .

أردت فقط نشر إجابة لمستخدمي Vue.js الآخرين.

@ travis5491811 هذا يفتح نافذة إلكترون أخرى بالصفحة اليمنى. هل هذا التصرف المتوقع؟

هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات