以编程方式触发网页中的事件并在托管浏览器控件中接收它们 [英] Programmatically triggering events in web page and receiving them in hosted browser control

查看：97 发布时间：2019/6/15 7:30:49 Javascript HTML MFC IE9

本文介绍了以编程方式触发网页中的事件并在托管浏览器控件中接收它们的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

由于我没有遇到任何问题，我希望有人可以了解这个问题。

我正在研究巨大的视野，Visual Studio 2010中成熟的MFC应用程序。此视图通过 CDHtmlDialog [ ^ ]派生类。在浏览器页面中，我们使用D3.js从我们从Web服务器检索的数据中呈现和显示SVG图形。数据集和渲染的SVG相当大（SVG（XML）字符串超过1,000,000个字符），我需要在渲染SVG时向浏览器控件发送通知。我们从Web服务器获取数据并从jQuery $（document）.ready（）函数中进行D3处理。

我的问题是我在挣扎以编程方式从网页中触发事件并在浏览器控件中接收它。我可以很好地获取所有正常的用户启动事件 - 单击，鼠标悬停，焦点等，但仅当我手动执行操作时，而不是当我设置JavaScript函数来模拟点击或其他一些动作。

我唯一能够可靠使用的是OnCopy（到剪贴板）事件，但我真的不想乱用剪贴板（特别是因为view使用Word Automation创建/更新文档。

作为一个基本的起点，我一直在使用 MS示例DHTMLExplore [ ^ ]在我将代码移入应用程序之前运行测试。

[提示：如果你想尝试类似的东西，确保你有<！DOCTYPE html>和/或< meta http-equiv =X-UA-Compatiblecontent =IE = 9>在您的文档或SVG将不会呈现。根据您使用的操作系统，您可能还需要访问注册表以使浏览器控件正常运行。请查看这样的内容 [ ^ ]，这在MSDN上 [ ^ ]并通过连接对此 [ ^ ]]

对于简单测试，我使用下面的HTML：

Since I am not getting anywhere with my problem, I was hoping someone here might have knowledge on this subject.

I am working on a view in a huge, mature MFC application in Visual Studio 2010. This view hosts a browser control through a CDHtmlDialog[^] derived class. Within the browser page, we are using D3.js to render and display SVG graphics from data we retrieve from our web server. The data set and the rendered SVG is rather large (the SVG (XML) string is over 1,000,000 characters) and I need to send a notification to my browser control when the SVG has been rendered. We get the data from the web server and do the D3 processing from within the jQuery $(document).ready() function.

My problem is that I am struggling to programmatically trigger an event from within the web page and receive it in the browser control. I can get all the normal user initiated events just fine - click, mouseover, focus, etc., but only when I manually perform the action, not when I rig up a JavaScript function to simulate a click or some other action.
The only thing I have been able to use reliably, is the OnCopy (to clipboard) event, but I would really prefer not to mess around with the clipboard for this (especially since the view uses Word Automation to create/update documents).

As a basic starting point, I have been using the MS sample DHTMLExplore[^] for running tests before I move the code into our application.
[HINT: If you want to try something like that, make sure you have <!DOCTYPE html> and/or <meta http-equiv="X-UA-Compatible" content="IE=9"> in your document or the SVG will not render. Depending on which OS you are using, you might also have to take to the registry to get the browser control to behave correctly. Check out this on SO[^], this on MSDN[^] and check your settings by connecting to this[^]]

For simple tests, I am using the HTML below:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<script type="text/javascript">
    function CopySvgImage(elementId) {
        if (document.body.createControlRange) {
            var controlRange = document.body.createControlRange();
            controlRange.add(document.all(elementId));
            controlRange.execCommand('Copy');
        }
    }

    function SignalImageReady(elementId) {
        if (document.createEvent) {
            var imageElement = document.getElementById(elementId);
            var readyEvent = document.createEvent('MouseEvents');

            readyEvent.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 1, false, false, false, false, 0, null);
            imageElement.dispatchEvent(readyEvent);
        }
    }
</script>
</head>
<body>
<img src="folder.gif" id="folder_image" onclick="CopySvgImage('circle_image')" />
<svg class="svgimage" id="circle_image" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"></circle>
</svg>

<button type="button" onclick="CopySvgImage('circle_image')">Copy Image</button>
<button type="button" onclick="SignalImageReady('folder_image')">Signal Ready</button>

</body>
</html>

[注意：folder.gif作为MSDN样本中的资源嵌入]

在这种情况下我在浏览器控件代码中设置了一个事件接收器，以接收文件夹图像的OnClick事件。当我手动点击图像时，我收到该事件，但是当我点击模拟图像上的点击的信号就绪按钮时，我没有收到。在这两种情况下，我都可以看到'circle_image'被复制到剪贴板，所以我知道我的模拟点击事件可以工作并触发HTML页面中的复制功能。

在上面的代码中我使用的是 dispatchEvent（），但我也尝试过使用jQuery的 trigger（）和 triggerHandler（）以及：

- 触发几种不同的事件类型（点击，聚焦，模糊，激活，滚动，propertychanged，dataavailable等。）。

- 在几种不同的HTML元素类型（span，div，img，svg，td等）上触发事件。

- 将事件接收到 onload < svg>的事件元素。

- 为 onpropertychanged 事件设置事件接收器，然后更改 .innerHTML 和 .style.color 一个元素。

这是其中一个有很多的情况不同的东西和组合尝试，这是一项相当艰巨的任务，所以如果你知道一些你确定会有用的东西，我很乐意听到它。

在我的系统上，我在Windows 7（64位）上运行IE10，但我们需要保持与IE9的兼容性。

谷歌是我的朋友，我一直在询问并寻找答案，所以不需要建议我这样做。 CodeProject上关于CDHtmlDialog的一些文章也没有给我答案。看起来很多人都没有在应用程序中托管浏览器控件的高级内容。

Soren Madsen

[Note: folder.gif is embedded as a resource in the MSDN sample]
In this case I have an event sink set up in the browser control code to receive OnClick events for the folder image. I receive that event when I manually click on the image, but not when I click on the "Signal Ready" button, which simulates a click on the image. In both cases, I can see the 'circle_image' being copied to the clipboard, so I know my simulated click event works and triggers the copy functionality in the HTML page.

In the code above I am using dispatchEvent(), but I have also tried using jQuery's trigger() and triggerHandler() as well as:
- Triggering several different event types (click, focus, blur, activate, scroll, propertychanged, dataavailable, etc.).
- Triggering events on several different HTML element types (span, div, img, svg, td, etc.).
- Having an event sink to the onload event for the <svg> element.
- Having an event sink for the onpropertychanged event and then changing the .innerHTML and .style.color of an element.

This is one of those cases where there are a lot of different things and combinations to try out and it is quite a daunting task, so if you know of something that you are sure will work, I would love to hear about it.

On my system, I am running IE10 on Windows 7 (64 bit), but we need to maintain compatibility with IE9.
Google is my friend and I have been asking and looking for answers already, so no need to suggest I do that. The few articles about CDHtmlDialog here on CodeProject have not given me the answer either. It simply seems like there are not a lot of people doing advanced stuff with browser controls hosted in applications.

Soren Madsen

推荐答案

（document）.ready（）函数。

我的问题是我正在努力以编程方式从网页中触发事件并接收它在浏览器控件中。我可以很好地获取所有正常的用户启动事件 - 单击，鼠标悬停，焦点等，但仅当我手动执行操作时，而不是当我设置JavaScript函数来模拟点击或其他一些动作。

我唯一能够可靠使用的是OnCopy（到剪贴板）事件，但我真的不想乱用剪贴板（特别是因为view使用Word Automation创建/更新文档。

作为一个基本的起点，我一直在使用 MS示例DHTMLExplore [ ^ ]在我将代码移入应用程序之前运行测试。

[提示：如果你想尝试类似的东西，确保你有<！DOCTYPE html>和/或< meta http-equiv =X-UA-Compatiblecontent =IE = 9>在您的文档或SVG将不会呈现。根据您使用的操作系统，您可能还需要访问注册表以使浏览器控件正常运行。请查看这样的内容 [ ^ ]，这在MSDN上 [ ^ ]并通过连接对此 [ ^ ]]

对于简单测试，我使用下面的HTML：

(document).ready() function.

My problem is that I am struggling to programmatically trigger an event from within the web page and receive it in the browser control. I can get all the normal user initiated events just fine - click, mouseover, focus, etc., but only when I manually perform the action, not when I rig up a JavaScript function to simulate a click or some other action.
The only thing I have been able to use reliably, is the OnCopy (to clipboard) event, but I would really prefer not to mess around with the clipboard for this (especially since the view uses Word Automation to create/update documents).

As a basic starting point, I have been using the MS sample DHTMLExplore[^] for running tests before I move the code into our application.
[HINT: If you want to try something like that, make sure you have <!DOCTYPE html> and/or <meta http-equiv="X-UA-Compatible" content="IE=9"> in your document or the SVG will not render. Depending on which OS you are using, you might also have to take to the registry to get the browser control to behave correctly. Check out this on SO[^], this on MSDN[^] and check your settings by connecting to this[^]]

For simple tests, I am using the HTML below:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<script type="text/javascript">
    function CopySvgImage(elementId) {
        if (document.body.createControlRange) {
            var controlRange = document.body.createControlRange();
            controlRange.add(document.all(elementId));
            controlRange.execCommand('Copy');
        }
    }

    function SignalImageReady(elementId) {
        if (document.createEvent) {
            var imageElement = document.getElementById(elementId);
            var readyEvent = document.createEvent('MouseEvents');

            readyEvent.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 1, false, false, false, false, 0, null);
            imageElement.dispatchEvent(readyEvent);
        }
    }
</script>
</head>
<body>
<img src="folder.gif" id="folder_image" onclick="CopySvgImage('circle_image')" />
<svg class="svgimage" id="circle_image" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"></circle>
</svg>

<button type="button" onclick="CopySvgImage('circle_image')">Copy Image</button>
<button type="button" onclick="SignalImageReady('folder_image')">Signal Ready</button>

</body>
</html>

这篇关于以编程方式触发网页中的事件并在托管浏览器控件中接收它们的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

以编程方式触发网页中的事件并在托管浏览器控件中接收它们 [英] Programmatically triggering events in web page and receiving them in hosted browser control

问题描述

推荐答案

相关文章

其他开发语言最新文章

热门教程

热门工具

登录关闭

以编程方式触发网页中的事件并在托管浏览器控件中接收它们 [英] Programmatically triggering events in web page and receiving them in hosted browser control

问题描述

推荐答案

相关文章

其他开发语言最新文章

热门教程

热门工具

登录 关闭

登录关闭