Cross-browser Problems

I have encountered a very difficult problem. Let's discuss it.

There are many custom forms in the workflow system. Because they are old systems, these forms can only support IE. For mobile apps, You need to display these custom aspx forms in mobile safari.

These Custom forms use a large number of HTC and only support JavaScript of IE. The current task is to display these forms in mobile safari.

I think it is not good to think of many methods. Yesterday, I suddenly thought of a way to convert the form into an image based on the URL and then display it to the mobile client. The general process is: Create a webbrowser instance on the server and load the form URL on the webbrowser. Because webbrowser has the built-in ie kernel, HTC, JavaScript, and CSS can all run well, and then convert the webbrowser to an image through ActiveX.CodeAs follows:

Iviewobject. CS

[Comvisible (true), comimport ()] [guidattriible ("0000010d-0000-0000-c000-0000000000000046")] [interfacetypeattribute (cominterfacetype. interfaceisiunknown)] public interface iviewobject {[Return: financialas (unmanagedtype. i4)] [preservesig] int draw ([financialas (unmanagedtype. u4)] uint32 dwdrawaspect, int lindex, intptr pvaspect, [in] intptr PTD, intptr hdctargetdev, intptr hdcdraw, [financialas (unmanagedtype. struct)] ref rectangle lprcbounds, [financialas (unmanagedtype. struct)] ref rectangle lprcwbounds, intptr pfncontinue, [financialas (unmanagedtype. u4)] uint32 dwcontinue); [preservesig] int getcolorset ([IN, financialas (unmanagedtype. u4)] int dwdrawaspect, int lindex, intptr pvaspect, [in] intptr PTD, intptr hictargetdev, [out] intptr ppcolorset); [preservesig] int freeze ([in, financialas (unmanagedtype. u4)] int dwdrawaspect, int lindex, intptr pvaspect, [out] intptr pdwfreeze); [preservesig] int unfreeze ([IN, financialas (unmanagedtype. u4)] int dwfreeze); void setadvise ([IN, financialas (unmanagedtype. u4)] int aspects, [in, financialas (unmanagedtype. u4)] int advf, [in, financialas (unmanagedtype. interface)] iadvisesink padvsink); void getadvise ([In, out, financialas (unmanagedtype. lparray)] int [] paspects, [in, out, financialas (unmanagedtype. lparray)] int [] advf, [in, out, financialas (unmanagedtype. lparray)] iadvisesink [] padvsink );}

Htmlcapture. CS

   Public     Class  Htmlcapture
{
  Private  Webbrowser web;
  Private  Timer tready;
  Private  Rectangle screen;
  Private  Size  ? Imgsize  =     Null  ;

  //  An event that triggers when the HTML document is captured  
    Public     Delegate     Void  Htmlcaptureevent (  Object Sender,
Uri URL, bitmap image );
  Public     Event  Htmlcaptureevent htmlimagecapture;

  //  Class Constructor  
    Public  Htmlcapture ()
{
  //  Initialise the webbrowser and the timer  
 Web  =     New  Webbrowser ();
Tready  =     New  Timer ();
Tready. Interval  =     2000  ;
Screen  =  Screen. primaryscreen. bounds;
  // Set the webbrowser width and hight  
  Web. Width  =  Screen. width;
Web. Height  =  Screen. height;
  //  Suppress script errors and hide scroll bars  
  Web. scripterrorssuppressed  =     True ;
Web. scrollbarsenabled  =     False  ;
  //  Attached events  
  Web. Navigating  + =  
  New  Webbrowsernavigatingeventhandler (web_navigating );
Web. documentcompleted  + =    New  
Webbrowserdocumentcompletedeventhandler (web_documentcompleted );
Tready. tick  + =     New  Eventhandler (tready_tick );
}

  # Region  Public Methods  
  Public     Void  Create (  String URL)
{
Imgsize  =     Null  ;
Web. navigate (URL );
}

  Public     Void  Create (  String  URL, size imgsz)
{
  This  . Imgsize  =  Imgsz;
Web. navigate (URL );
}
 # Endregion  

  # Region  Events  
  Void  Web_documentcompleted (  Object  Sender,
Webbrowserdocumentcompletedeventargs E)
{
  //  Start the timer  
  Tready. Start ();
  // String S = web. Document. getelementbyid (""). innerhtml;  
   

}

  Void  Web_navigating (  Object  Sender, webbrowsernavigatingeventargs E)
{
  //  Stop the timer  
  Tready. Stop ();
}



  Void  Tready_tick (  Object Sender, eventargs E)
{
  //  Stop the timer  
  Tready. Stop ();
  //  Get the size of the document's body  
  Rectangle body  =  Web. Document. Body. scrollrectangle;

  //  Check if the document width/height is greater than screen width/height  
 Rectangle docrectangle  =     New  Rectangle ()
{
Location  =     New  Point (  0  ,  0  ),
Size  =     New Size (body. Width  >  Screen. Width  ?  Body. Width: screen. Width,
Body. Height  >  Screen. Height  ?  Body. Height: screen. Height)
};
  //  Set the width and height of the webbrowser object  
  Web. Width  = Docrectangle. width;
Web. Height  =  Docrectangle. height;

  //  If the imgsize is null, the size of the image will
  //  Be the same as the size of webbrowser object
  //  Otherwise set the image size to imgsize  
  Rectangle imgrectangle;
  If  (Imgsize  =    Null  )
Imgrectangle  =  Docrectangle;
  Else  
Imgrectangle  =     New  Rectangle ()
{
Location  =     New  Point (  0 ,  0  ),
Size  =  Imgsize. Value
};
  //  Create a bitmap object  
  Bitmap bitmap  =     New  Bitmap (imgrectangle. Width, imgrectangle. Height );
  //  Get the viewobject of the webbrowser 
  

Iviewobject Ivo  =  Web. Document. domdocument  As  Iviewobject;
Ivo. tostring ();
  Using  (Graphics g  =  Graphics. fromimage (Bitmap ))
{
  //  Get the handle to the device context and draw  
  Intptr HDC =  G. gethdc ();
Ivo. Draw (  1  ,  -  1  , Intptr. Zero, intptr. Zero,
Intptr. Zero, HDC,  Ref  Imgrectangle,
  Ref  Docrectangle, intptr. Zero,  0  );
G. releasehdc (HDC );
}
  // Invoke the htmlimagecapture event  
  Htmlimagecapture (  This  , Web. url, bitmap );
}
  # Endregion  
}
} 

The above code can be used as an image of the workflow form:

 
Void hc_htmlimagecapture (Object sender, Uri URL, bitmap image) {image. save ("C:/test.bmp");} private void button#click (Object sender, eventargs e) {htmlcapture Hc = new htmlcapture (); HC. htmlimagecapture + = new htmlcapture. htmlcaptureevent (hc_htmlimagecapture); HC. create ("http: // 10.5.23.117: 8011/recipe1.aspx ");}
 

In this way, the effect is the same as that displayed on the PC end.

Screenshot of Baidu snapshot:

Image obtained:

Although the display is the same as that on the PC end, the main problems of images are:

1. copy and paste are not supported

2. Multi-Tab switching is not supported (the mobile end does not need to support form editing)

3. hyperlink clicking is not supported

Summary:Because webbrowser supports HTC and already written JavaScript code, while JS and HTC have done a lot of business logic processing, it is correct to use webbrowser on the server to process forms. But how can we solve the above three problems. Further exploration is required. If you have a better idea without modifying the existing workflow forms, I hope you can tell me.

Appendix:Capture Image Code Based on URL