Fatal编程技术网
  • javascript/
  • Javascript 在WPF WebBrowser内分块使用

Javascript 在WPF WebBrowser内分块使用

javascript c# wpf

Javascript 在WPF WebBrowser内分块使用,javascript,c#,wpf,webbrowser-control,blockly,Javascript,C#,Wpf,Webbrowser Control,Blockly,是否可以在WPF WebBrowser中使用块式google javascript库 特别是，块状需求。我们如何引用js库？简短回答 您可以使用WPF控件中的所有blocky功能，包括UI工具和API函数。为此，您应： 创建一个HTML内容，其中包含引用Blockyjs的script标记，或您希望从C#调用的方法，以及基于您的需求所需的HTML和XML内容（例如工具箱和工作区）。您可以在运行时动态加载工具箱和工作区 使用导航或导航字符串 如果需要调用脚本，请使用WebBrowsercontro

是否可以在WPF WebBrowser中使用块式google javascript库

特别是，块状需求。我们如何引用js库？

简短回答 您可以使用WPF控件中的所有blocky功能，包括UI工具和API函数。为此，您应：

  • 创建一个HTML内容，其中包含引用Blocky
    js
    的
    script
    标记，或您希望从C#调用的方法，以及基于您的需求所需的HTML和XML内容（例如工具箱和工作区）。您可以在运行时动态加载工具箱和工作区
  • 使用
    导航
    或
    导航字符串
  • 如果需要调用脚本，请使用
    WebBrowser
    control的方法
此外，为了能够使用
Blocky
，您应该使
WebBrowser
使用最新文档模式，而不使用兼容模式，并显示现代内容

例子 此示例显示：

  • 如何动态加载工具箱
  • 如何动态加载工作区
  • 如何使用javascript方法调用Blocky API方法。在本例中，您可以看到
    showCode
    和
    runCode
    代理方法，这些方法独立于wprkspace，可用于任何工作空间。您可以从C#调用javascript方法
例如，您可以使用以下两种方法之一。我创建了一个示例，展示了如何使用Blocky API方法和Blocky UI工具。本例基于一个示例，该示例演示了如何使用Blocky API从Blocky工作区生成javascript

<xml>
<block type="controls_if" inline="false" x="20" y="20">
    <mutation else="1"></mutation>
    <value name="IF0">
    <block type="logic_compare" inline="true">
        <field name="OP">EQ</field>
        <value name="A">
        <block type="math_arithmetic" inline="true">
            <field name="OP">ADD</field>
            <value name="A">
            <block type="math_number">
                <field name="NUM">6</field>
            </block>
            </value>
            <value name="B">
            <block type="math_number">
                <field name="NUM">7</field>
            </block>
            </value>
        </block>
        </value>
        <value name="B">
        <block type="math_number">
            <field name="NUM">13</field>
        </block>
        </value>
    </block>
    </value>
    <statement name="DO0">
    <block type="text_print" inline="false">
        <value name="TEXT">
        <block type="text">
            <field name="TEXT">Don't panic</field>
        </block>
        </value>
    </block>
    </statement>
    <statement name="ELSE">
    <block type="text_print" inline="false">
        <value name="TEXT">
        <block type="text">
            <field name="TEXT">Panic</field>
        </block>
        </value>
    </block>
    </statement>
</block>
</xml>

下载 您可以从以下位置克隆或下载工作示例：

逐步创建示例

该示例包含一个简单的HTML文件，在其头标记中添加了所需的javascript文件。它还包含两个代理方法，我们创建这些方法是为了从C#调用它们

该示例还包含两个xml文件。打开用于块工作区，打开一个用于工具箱

注意：创建这些文件不是强制性的，您可以在运行时动态创建工作区或工具箱。这只是为了说明您可以在运行时加载工作区和工具箱，而不需要是静态的

1）创建WPF应用程序

创建一个WPF项目并将其命名为
WpfAppllicatin1

2）创建
blockyWorkspace.xml
File

使用以下内容创建
blockyWorkspace.xml
文件。此文件将用于创建块状工作区

<xml>
<block type="controls_if" inline="false" x="20" y="20">
    <mutation else="1"></mutation>
    <value name="IF0">
    <block type="logic_compare" inline="true">
        <field name="OP">EQ</field>
        <value name="A">
        <block type="math_arithmetic" inline="true">
            <field name="OP">ADD</field>
            <value name="A">
            <block type="math_number">
                <field name="NUM">6</field>
            </block>
            </value>
            <value name="B">
            <block type="math_number">
                <field name="NUM">7</field>
            </block>
            </value>
        </block>
        </value>
        <value name="B">
        <block type="math_number">
            <field name="NUM">13</field>
        </block>
        </value>
    </block>
    </value>
    <statement name="DO0">
    <block type="text_print" inline="false">
        <value name="TEXT">
        <block type="text">
            <field name="TEXT">Don't panic</field>
        </block>
        </value>
    </block>
    </statement>
    <statement name="ELSE">
    <block type="text_print" inline="false">
        <value name="TEXT">
        <block type="text">
            <field name="TEXT">Panic</field>
        </block>
        </value>
    </block>
    </statement>
</block>
</xml>
4）创建
blockyHTML.html
File

使用以下内容创建
blockyHTML.html
文件。此文件仅包含对块脚本的引用，以及将使用C#代码从应用程序调用的javascript方法：

6）运行应用程序

运行应用程序时，在按钮被启用后，单击第一个按钮，然后可以获得
showCode
方法的结果，该方法使用blocky API从blocky workspace生成javascript代码

<xml>
<block type="controls_if" inline="false" x="20" y="20">
    <mutation else="1"></mutation>
    <value name="IF0">
    <block type="logic_compare" inline="true">
        <field name="OP">EQ</field>
        <value name="A">
        <block type="math_arithmetic" inline="true">
            <field name="OP">ADD</field>
            <value name="A">
            <block type="math_number">
                <field name="NUM">6</field>
            </block>
            </value>
            <value name="B">
            <block type="math_number">
                <field name="NUM">7</field>
            </block>
            </value>
        </block>
        </value>
        <value name="B">
        <block type="math_number">
            <field name="NUM">13</field>
        </block>
        </value>
    </block>
    </value>
    <statement name="DO0">
    <block type="text_print" inline="false">
        <value name="TEXT">
        <block type="text">
            <field name="TEXT">Don't panic</field>
        </block>
        </value>
    </block>
    </statement>
    <statement name="ELSE">
    <block type="text_print" inline="false">
        <value name="TEXT">
        <block type="text">
            <field name="TEXT">Panic</field>
        </block>
        </value>
    </block>
    </statement>
</block>
</xml>
您还可以通过单击第二个按钮来运行使用blocky创建的代码

WPF WebBrowser是一款嵌入式Internet Explorer，因此它可以完美地使用外部脚本。你试过了吗？有什么问题吗？嗯，使用InvokeScript方法使用外部简单Javascript函数似乎是可能的。我的问题是要知道如何使用像Blockly这样的Javascript库，它需要几个脚本声明、参数配置和工作区注入。注意，您必须在WebBrowser中打开IE11仿真，如下所述：使用您的.exe文件名谢谢您的帮助！我设法在WebBrowser中调用index.html页面。但是现在我如何使用通过这个WebBrowser的Blockly API呢？这个问题太笼统了。是的，你可以用它。你想做什么？多个
.js
文件有什么问题。只需在head标记中引用它们并使用它们。1）您可以在HTML文件中使用Blocky workspace，就像大多数Blocky的演示示例一样。我使用了一个不同的文件来展示如何注入工作区。如果您想使用Blocky的UI工具，只需在同一个html文件（甚至是单独的文件）中创建工具箱和工作区，并将html文件加载到
WebBrowser
control。2）直接调用Blocky API函数即可，但是，由于方法可能需要一些上下文，并且您可能需要在单个上下文中调用多个方法以获得所需的结果，因此我相信创建一个javascript接口来为您执行这些任务会更友好。@SunnyBhadana在回答问题时，我试过了，效果很好，截图取自工作实例。我猜您在WebBrowser控件中显示现代内容方面有问题。要修复它，请看一看。@MarkDiedericks我在GitHub上为这个示例创建了一个存储库，并添加了答案的链接。谢谢你的反馈：）@SunnyBhadana我是根据它工作的。与其将其设置为
边缘
，不如将其设置为
IE 10
，Mark也提到了这一点。谢谢你的反馈。 
public MainWindow()
{
    InitializeComponent();
    showCodeButton.IsEnabled = false;
    runCodeButton.IsEnabled = false;
    browser.NavigateToString(System.IO.File.ReadAllText(@"d:\blockyHTML.html"));
}
private void browser_LoadCompleted(object sender, NavigationEventArgs e)
{
    showCodeButton.IsEnabled = true;
    runCodeButton.IsEnabled = true;
    var toolboxXML = System.IO.File.ReadAllText(@"d:\blockyToolbox.xml");
    var workspaceXML = System.IO.File.ReadAllText(@"d:\blockyWorkspace.xml");
    //Initialize blocky using toolbox and workspace
    browser.InvokeScript("init", new object[] { toolboxXML, workspaceXML });
}
private void showCodeButton_Click(object sender, RoutedEventArgs e)
{
    var result = browser.InvokeScript("showCode", new object[] { });
    MessageBox.Show(result.ToString());
}
private void runCodeButton_Click(object sender, RoutedEventArgs e)
{
    browser.InvokeScript("runCode", new object[] { });
}