NOTE: This page has been translated automatically from Russian to English. Original page.


Implementation of 1C JavaScript code in the object field of HTML documents (HTML 5) and call it from events Clicking a

An exemplary embodiment of JS code of 1C in the Field of HTML documents under controlled forms, with the results in a convenient 1C (by calling the events tied to the PoleHTMLDokumenta Clicking a member)

prehistory

During one project, it was necessary to perform javascript (hereinafter JS) code under the control of the object PoleHTMLDokumenta to obtain the result in 1C. The examples in the articles found, seemed not very convenient to use (personal opinion). It was decided to try to find another, more simple solution to search was given no more than 1 day.

I am interested in the article on Habré which stated that from an HTML document, you can programmatically call the event (used to call Clicking a method of PoleHTMLDokumenta object). And on this site management of attributes (use JS to perform 1C).

This was the starting point in the development of a method of interaction and object PoleHTMLDokumenta 1C.

For the experiment, we use a simple HTML page. 

<HTML>
<Head>
<Meta http-equiv = "X-UA-Compatible" content = "IE = 9" />
</ HEAD>
<Body>
<Div id = "TEST" />
</ Body>
</ Html>

Get to the point!

An example of these methods, you can see in the attached processing.

  1. Running script
  2. Getting the answer script
  3. Starting with the return script results in 1s


After testing the article was supplemented by the second approach, it was more simple and intuitive, I suggest trying the techniques described in the supplements.

JS Implementation of 1C

We can use the standard tag events to perform JS code in an object PoleHTMLDokumenta. Such as click, double click .... For example, I will use the event «OnClick», a list of tags supporting this event can be found here , choose the most simple tag div.

We get an item by ID of the DOM object built by Paul HTML documents. 

DIV = Elementy.Dok.Dokument.getElementById ( "TEST");

Let's try to find the attribute "onclick", associated with the mouse event click the item. 

NashliAtribut = DIV.getAttributeNode ( "onclick");

Delete an attribute if available 

If <> null NashliAtribut Then
    DIV.removeAttribute ( "onclick");
ENDIF;

Create the attribute and set the desired effect, we 

Attribute = Elementy.Katra.Dokument.createAttribute ( "onclick"); // Create an attribute
Atribut.value = "alert ( 'message from 1c');"; // Put this script that will perform
DIV.attributes.setNamedItem (attribute); // Bind attribute

Call the action of a mouse click. 

DIV.click ();

So we can fulfill any scripts, and bind / replace actions have elements PoleHTMLDokumenta object, thereby providing us the necessary behavior. For example a link / button displayed on the public site, we can prisoedint its action or change its standarnoe. (Probably so and work vlomschiki)

As a result, we obtain a function in Making a script 

& NaKliente
VypolnitSkript procedure (Team)
	
	DIV = Elementy.dok.Dokument.getElementById ( "TEST");
	
	NashliAtribut = DIV.getAttributeNode ( "onclick");
	If <> null NashliAtribut Then
		DIV.removeAttribute ( "onclick");
	ENDIF; 
	
	Attribute = Elementy.dok.Dokument.createAttribute ( "onclick");
	Atribut.value = "alert ( 'Message from 1c');";
	DIV.attributes.setNamedItem (attribute); // Bind attribute
	
	DIV.click ();
		
KonetsProtsedury

This procedure is used instead of the old method PoleHTMLDokumenta.Dokument.parentWindow.eval
which now (using IE8 and above) an error (method not found (the eval) object)

Update as of 03.25.2016

An attempt to execute this design platform 8.3.5.1570 and below a thick client, a controlled form, was not successful. But there was found another way to perform this operation. Perhaps even more simple and convenient.

We get our Element by ID 

DIV = Elementy.Katra.Dokument.getElementById ( "TEST");

Set the attribute «onclick» and its value, a function of the ( assembled HERE ) 

DIV.setAttribute ( "onclick", "alert ( 'Coordinates');");

execute scripts 

DIV.click ();

TA-DAH. everything is working 

VypolnitSkript procedure (TekstSkript) 

   DIV = Elementy.dok.Dokument.getElementById ( "TEST");
   DIV.setAttribute ( "onclick", TekstSkript);
   DIV.click ();

KonetsProtsedury

Update as of 02.08.2016

The comments were offered another way to call JS (thank Rie ), if you have the opportunity to change the HTML document, you can register the function in it and then its cause. passing it to the JS code.
<Script type = "text / javascript"> function exec (script) {eval (script); } </ Script>

1C and then: 

Elementy.PoleHTMLDokumenta1.Dokument.parentWindow.exec ( "alert ( 'OK')");

Return the result of JS 1C

We will use the event to transmit the result to the script object of 1C PoleHTMLDokumenta. Snap to PoleHTMLDokumenta Clicking a event that takes as input 3 parameters:

  1. in which the event occurred Element (PoleHTMLDokumenta itself)
  2. Subject Event
  3. perform standard behavior Symptom

To trigger an event by clicking the need to perform the following js code 

var evt = document.createEventObject (); // Create an empty object event
evt.propertyName = 'funkts1'; // Props in propertyName offer to put the result name (something like the type or name of the function from which the received data)
evt.data = '156'; // In the requisite data shall transmit the result data
document.body.fireEvent ( 'onclick', evt); // Execute the event by clicking PoleHTMLDokumenta

After completing this js code in the procedure by pressing the second parameter will we have created object event. Which is quite convenient to handle.

Example parse response. 

& NaKliente
// Get the name and the result of events
DokPriNazhatii Procedure (Element eventData, StandartnayaObrabotka)  
               
      ImyaOperatsii = DannyeSobytiya.Event.propertyName;
      DannyeOperatsii = DannyeSobytiya.Event.data;
      If ImyaOperatsii = "" Then // not our event
          Return;                       
      ENDIF;
              
      If ImyaOperatsii = "Funkts1" Then
         // Process result
      InacheEsli ImyaOperatsii = "funkts2" Then
          // Process result
          // ......  
      ENDIF;
                 
KonetsProtsedury

This method eliminates the use of handlers expectations, and provides a convenient identifier for the event. According to the ID we know exactly what data we have come, and how to analyze them.

Additions from 03/26/2016

And at this point, too, there have been neponyatki (oshitbka vosptroizvoditsya only plaforme 8.3.5.1570, but in order to prevent the situation, • other, give a decision) The very reason - when you run a form field HTML document at the time of the procedure call by clicking on the field HTML platform challenge sticks and felled all the COM object (An exception (htmlfile): Unspecified error). The solution was to disable execution stndarnogo events click, and deactivate floating events. How to do this, see below.

// Disable floating event details here 

evt.cancelBubble = true;

// Disable the default behavior more here 

evt.returnValue = false;

As a result, data from JS 1c we obtain the function. 

function return1c (name, data) {        

        var evt = document.createEventObject ();
	evt.propertyName = name;
	evt.data = data;
	evt.cancelBubble = true;
	evt.returnValue = false;
        document.fireEvent ( 'onclick', evt);
};

Conclusion.

By combining these methods, you can quite easily run required js code and receive data in 1C, for further processing.

Example implementation publication here

1C:Enterprise Developer's Community