Visual Studio C# Browser mit Javascript

BloodSteam · 8. April 2018

Hallo,
also Ich hab langweile und hab mir mal Visual Studio heruntergeladen.
Bin nur dazu gekommen ein sehr einfachen Browser zu erstellen.

Problem ist dass das Javascript nicht ausgeführt wird im Browser.

Ich finde nur Videos wo es nur bisschen erklärt wird aber nirgendswo auf den Punkt was Ich suche.
YouTube

Ich hab auch dies gefunden:
HtmlDocument.InvokeScript-Methode (System.Windows.Forms)

Mir scheint es so, als wäre der C# immer dediziert an den Javascript code.

Wenn Ich die Funktion ändere im Javascript dann funktioniert der nicht mehr, glaube Ich mal.

Könnt ihr mir da helfen?

Code:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace TwitchChat
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void btnGo_Click(object sender, EventArgs e)
        {
            string WebPage = urlAdress.Text.Trim();
            webBrowser1.Navigate(WebPage);
        }

        private void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
        {

        }

        private void urlAdress_TextChanged(object sender, EventArgs e)
        {
            this.AcceptButton = btnGo;
        }
    }
}

Gimmick · 8. April 2018

BloodSteam schrieb:
Problem ist dass das Javascript nicht ausgeführt wird im Browser.

Wenn da ein nutzbares Programm bei rauskommen soll, hast Du vorallem das Problem, dass das WebBrowser-Control standardmäßig auf dem Internet Explorer 7 basiert. Das Web hat sich in den letzten 12 Jahren dann doch leicht verändert :ugly:

.
Daher würde ich als Schritt Nr.1 entweder über eine Routine die genutze WebEngine an den installierten IE https://stackoverflow.com/questions/17922308/use-latest-version-of-internet-explorer-in-the-webbrowser-control anpassen oder ein umfangreiches und modernes proprietäres Control nutzen. Zum Beispiel CefSharp auf Basis der Chromium-Engine.

BloodSteam · 8. April 2018

Danke, hab es mir durchgelesen und kurz getestet.
Da ich keine Ahnung von C# und mich langsam an C# herantaste, ist so ein Programm ziemlich groß für mich.

Ich wollte ein quasi "Browser" erstellen, wo man ein Nicknamen eingibt, der nickname wird an einer stelle im "URL" eingefügt und ein Profil wird angezeigt.
Wünschte man könnte .exe Programme mit Javascript erstellen...

Gimmick · 8. April 2018

BloodSteam schrieb:
Danke, hab es mir durchgelesen und kurz getestet.
Da ich keine Ahnung von C# und mich langsam an C# herantaste, ist so ein Programm ziemlich groß für mich.

Ich wollte ein quasi "Browser" erstellen, wo man ein Nicknamen eingibt, der nickname wird an einer stelle im "URL" eingefügt und ein Profil wird angezeigt.
Wünschte man könnte .exe Programme mit Javascript erstellen...

Das sollte kein Problem sein.
Die Anleitung von CefSharp über Nuget nehmen und 1:1 nachbauen. Dann hast Du in deiner Forms schon einen funktionierenden Vollbild-Browser.

Die habe ich gerade benutzt. Da Nuget genutzt wird, den Punkt "DLLs (Manual Method)" überspringen.
Embedding Chrome in your C# App using CefSharp - CodeProject

Dann brauchst Du nurnoch eine Textbox und einen Button.
Der Button macht im Click-Event sowas wie:

LoadPage();

und LoadPage() sieht dann z.B. so aus:

Code:

private void LoadPage()
{
      string Name = textBox_Name.Text;
      string URL = "www.DeineURL.de/index.html?Name=" + Name;
      Browser.Load(URL);
      
}

Auf der Webseite dann per Javascript sowas wie hier: Parameter mit JavaScript auslesen

BloodSteam · 8. April 2018

Die Webseiten füllen aber die ganze Forum und Ich kann zb keine Buttons hinzufügen sonnst verdecken die alle Webseiten.
Ich würde auch gerne es so machen dass man am Anfang ein Fenster hat wo man den Nicknamen eingibt und zb mit radio buttons sachen auswählt etc.
Problem ist ich weiß nicht wie man den Content ändert bzw die Form?
Sieht so aus:

Code:

    public partial class Form1 : Form
    {
        public ChromiumWebBrowser chromeBrowser;

        public Form1()
        {
            InitializeComponent();

            InitializeChromium();
        }

        private void Form1_Load(object sender, EventArgs e)
        {

        }

        private void InitializeChromium()
        {
            CefSettings settings = new CefSettings();

            Cef.Initialize(settings);

            chromeBrowser = new ChromiumWebBrowser("https://www.twitch.tv/popout/g1k777/chat?popout=");

            this.Controls.Add(chromeBrowser);

            chromeBrowser.Dock = DockStyle.Fill;
        }

        private void Form1_FormClosing(object sender, FormClosingEventArgs e)
        {
            Cef.Shutdown();
        }
    }

Gimmick · 9. April 2018

BloodSteam schrieb:
Die Webseiten füllen aber die ganze Forum und Ich kann zb keine Buttons hinzufügen sonnst verdecken die alle Webseiten.
Ich würde auch gerne es so machen dass man am Anfang ein Fenster hat wo man den Nicknamen eingibt und zb mit radio buttons sachen auswählt etc.
Problem ist ich weiß nicht wie man den Content ändert bzw die Form?
Sieht so aus:

Erst Fenster 1 mit Auswahlmenü starten, dann zu Fenster mit der Browser-Ansicht wechsel halte ich für keine gute Idee. Das irritiert finde ich, wenn man dann nochmal eine neue Auswahl treffen möchte.
Ich würde links oder rechts neben dem Browser ein Menü bauen.

Code:
Code:

chromeBrowser.Dock = DockStyle.Fill;

Das ist der Übertäter.

Möglichkeit 1:
Bau Dir in der Forms-Designer-Ansicht das Fenster mal so zusammen, wie Du das haben möchtest und nimmt statt des Browsers z.B. ein Panel, SplitContainer oder GroupBox.
Dann kannst Du im Code bei

Code:

this.Controls.Add(chromeBrowser);

this ( = die Form) durch das Panel/Box ersetzen und DockStyle.Fill so lassen. Dann wird der Container ausgefüllt.

Möglichkeit 2:
Du entfernst die Zeile mit DockStyle.Fill, musst dann aber angeben, wohin der Browser soll, wie groß er sein soll und an welche Fensterränder er verankert werden soll, damit er seine Größe beim Skalieren des Fenster mitändert.

Browser unter einer Textbox:

Code:

            this.Controls.Add(Browser);
            Browser.Anchor = AnchorStyles.Bottom | AnchorStyles.Left | AnchorStyles.Right | AnchorStyles.Top;
            Browser.Left = 5;
            Browser.Top = textBox_URL.Bottom + 5;
            Browser.Width = this.Width - 25;
            Browser.Height = this.Height - textBox_URL.Bottom - 50;

Mit den Werten muss man dann aber fummeln bis es passt.

RicoBrassers · 9. April 2018

BloodSteam schrieb:
Wünschte man könnte .exe Programme mit Javascript erstellen...

Ist möglich - nennt sich Electron und wird von GitHub entwickelt. Darauf basieren unter anderem auch VisualStudio Code, Atom, der Slack Desktopclient und der Discord Desktopclient.
Electron | Build cross platform desktop apps with JavaScript, HTML, and CSS.

Dabei basiert das Ganze auf dem NodeJS-Ökosystem.

https://electronjs.org/ schrieb:
Sind Sie in der Lage eine Website zu erstellen? Dann können Sie auch eine Desktop-Anwendung entwickeln! Electron ist ein Framework mit dem Sie Webtechnologien wie JavaScript, HTML und CSS nutzen um native Desktop-Applikationen zu erstellen. Wir kümmern uns um die kniffligen Dinge - und Sie um den Kern der Anwendung.

Edit: Da Electron - nebst NodeJS - auch auf Chromium basiert, hat man quasi unabhängig vom installierten Browser des Users Zugriff auf die meisten modernen Features von HTML5 und CSS3.

BloodSteam · 10. April 2018

Ich weiß nicht woran es liegt...

"Der unbekannte Name 'twitchContainer_Paint' in Zeile 40 kann vom Designer nicht verarbeitet werden. Der Code in der Methode 'InitializeComponent' wird vom Designer generiert und sollte nicht manuell geändert werden. Entfernen Sie alle Änderungen, und starten Sie den Designer erneut. "

Code:

twitchContainer.Controls.Add(chromeBrowser);

Code:

namespace TwitchChatOverlay
{
    partial class Form1
    {
        /// <summary>
        /// Erforderliche Designervariable.
        /// </summary>
        private System.ComponentModel.IContainer components = null;

        /// <summary>
        /// Verwendete Ressourcen bereinigen.
        /// </summary>
        /// <param name="disposing">True, wenn verwaltete Ressourcen gelöscht werden sollen; andernfalls False.</param>
        protected override void Dispose(bool disposing)
        {
            if (disposing && (components != null))
            {
                components.Dispose();
            }
            base.Dispose(disposing);
        }

        #region Vom Windows Form-Designer generierter Code

        /// <summary>
        /// Erforderliche Methode für die Designerunterstützung.
        /// Der Inhalt der Methode darf nicht mit dem Code-Editor geändert werden.
        /// </summary>
        private void InitializeComponent()
        {
            this.twitchContainer = new System.Windows.Forms.Panel();
            this.SuspendLayout();
            // 
            // twitchContainer
            // 
            this.twitchContainer.Location = new System.Drawing.Point(0, 0);
            this.twitchContainer.Name = "twitchContainer";
            this.twitchContainer.Size = new System.Drawing.Size(400, 600);
            this.twitchContainer.TabIndex = 0;
            this.twitchContainer.Paint += new System.Windows.Forms.PaintEventHandler(this.twitchContainer_Paint);
            // 
            // Form1
            // 
            this.ClientSize = new System.Drawing.Size(400, 600);
            this.Controls.Add(this.twitchContainer);
            this.FormBorderStyle = System.Windows.Forms.FormBorderStyle.None;
            this.Name = "Form1";
            this.Load += new System.EventHandler(this.Form1_Load);
            this.ResumeLayout(false);

        }

        #endregion

        private System.Windows.Forms.Panel twitchContainer;
    }
}

Dies hier ist die Zeile 40:

Code:

this.twitchContainer.Paint += new System.Windows.Forms.PaintEventHandler(this.twitchContainer_Paint);

Ich versuche den Header zu ändern, finde aber nichts i'm internet.

Gimmick · 11. April 2018

BloodSteam schrieb:

Ich weiß nicht woran es liegt...

"Der unbekannte Name 'twitchContainer_Paint' in Zeile 40 kann vom Designer nicht verarbeitet werden. Der Code in der Methode 'InitializeComponent' wird vom Designer generiert und sollte nicht manuell geändert werden. Entfernen Sie alle Änderungen, und starten Sie den Designer erneut. "

Code:

twitchContainer.Controls.Add(chromeBrowser);

Code:

namespace TwitchChatOverlay
{
    partial class Form1
    {
        /// <summary>
        /// Erforderliche Designervariable.
        /// </summary>
        private System.ComponentModel.IContainer components = null;

        /// <summary>
        /// Verwendete Ressourcen bereinigen.
        /// </summary>
        /// <param name="disposing">True, wenn verwaltete Ressourcen gelöscht werden sollen; andernfalls False.</param>
        protected override void Dispose(bool disposing)
        {
            if (disposing && (components != null))
            {
                components.Dispose();
            }
            base.Dispose(disposing);
        }

        #region Vom Windows Form-Designer generierter Code

        /// <summary>
        /// Erforderliche Methode für die Designerunterstützung.
        /// Der Inhalt der Methode darf nicht mit dem Code-Editor geändert werden.
        /// </summary>
        private void InitializeComponent()
        {
            this.twitchContainer = new System.Windows.Forms.Panel();
            this.SuspendLayout();
            // 
            // twitchContainer
            // 
            this.twitchContainer.Location = new System.Drawing.Point(0, 0);
            this.twitchContainer.Name = "twitchContainer";
            this.twitchContainer.Size = new System.Drawing.Size(400, 600);
            this.twitchContainer.TabIndex = 0;
            this.twitchContainer.Paint += new System.Windows.Forms.PaintEventHandler(this.twitchContainer_Paint);
            // 
            // Form1
            // 
            this.ClientSize = new System.Drawing.Size(400, 600);
            this.Controls.Add(this.twitchContainer);
            this.FormBorderStyle = System.Windows.Forms.FormBorderStyle.None;
            this.Name = "Form1";
            this.Load += new System.EventHandler(this.Form1_Load);
            this.ResumeLayout(false);

        }

        #endregion

        private System.Windows.Forms.Panel twitchContainer;
    }
}

Dies hier ist die Zeile 40:

Code:

this.twitchContainer.Paint += new System.Windows.Forms.PaintEventHandler(this.twitchContainer_Paint);

Ich versuche den Header zu ändern, finde aber nichts i'm internet.
Anhang anzeigen 994244

Du bist in der falschen Datei. Alles was Du selber schreibst kommt in die "Form1.cs".
Wenn Du ein Control, wie den Browser, zur Laufzeit (=per Code) in die Form packen willst, kommt das auch in "Form1.cs". Die Form1.Designer.cs" Datei gibt nur das wieder, was in "Form1.cs[Entwurf]" eingestellt wurde, da schreibt man nix rein.

Für das Hinzufügen von Controls oder andere Änderungen an der Optik solltest du in der Form1.cs unter

Code:

public Form1()
        {
            InitializeComponent();
        }

Eine Methode dafür einschieben. Z.B.:

Code:

public Form1()
        {
            InitializeComponent();
            AddControls();
        }

private void AddControls()
        {
            panel_Browser.Controls.Add(Browser);
            .....
        }

Creating Custom Windows Forms in C# using Panels - CodeProject

c# - Winforms - How do I create a custom windows border and close/minimise buttons? - Stack Overflow

.net - Custom titlebars/chrome in a WinForms app - Stack Overflow

BloodSteam · 11. April 2018

Ich hab's gefunden, FormBorderStyle = None und die Controls sind weg.

Bei VS.net verwendet man C# oder eine interne Sprache? Bspw jQuery basiert auf Javascript.

Wenn ich was suchen will soll ich dann C# suchen ja? Html etc hab Ich meist auf w3schools gesucht, alles perfekt erklärt.
Gibt es ähnliches bei C#?

Gimmick · 11. April 2018

Dachte Du willst die Optik der Titelleiste ändern. Ausschalten geht auch in den Eigenschafts rechts unten in Visual Studio. ^^

VisualStudio unterstützt diverse Sprachen. Mit C# oder VisualBasic ist man denke ich gut beraten, da findet man immer Hilfe oder Code ^^. Microsoft selbst bietet eine sehr gute Dokumentation und ansonsten stackoverflow, github usw.
Wenn die Programme etwas komplexer werden ist es mit nachschlagen aber nicht mehr getan, dann muss man sich grundlegend mit Softwarearchitektur beschäftigen, und da C# eine objektorientierte Sprache ist, eben auch mit objektorientiertem Programmieren.

xNeo92x · 19. April 2018

Schau dich mal hier um, da gibt es immer tolle Sachen: dotnet-snippets.de

Visual Studio C# Browser mit Javascript

BloodSteam

Guest

Gimmick

Guest

BloodSteam

Guest

Gimmick

Guest

BloodSteam

Guest

Gimmick

Guest

RicoBrassers

Komplett-PC-Aufrüster(in)

BloodSteam

Guest

Gimmick

Guest

BloodSteam

Guest

Gimmick

Guest

xNeo92x

Software-Overclocker(in)

Ähnliche Themen