sciter.js 嵌入 web.view

By terrorist at 2022-03-22 • 0人收藏 • 570人看过
import win.ui;
/*DSG{{*/
var winform = win.form(text="external 接口";right=927;bottom=559)
winform.add()
/*}}*/

import web.sciter;
var wbSciter = web.sciter( winform );

import web.view; 
namespace web.sciter.behavior.webview{  
	onAttach = function (scOwner) { 
		var ltCtrl = scOwner.addCtrl();
		wb = ..web.view(ltCtrl) 
	 
		ltCtrl.translateAccelerator = function( msg ){
			var message,vk = msg.message,msg.wParam;
    		if (   (message == 0x100/*_WM_KEYDOWN*/) || (message== 0x101/*_WM_KEYUP*/) ) { 
        		if( ( vk == 0x74/*_VK_F5*/ )
            		|| ( ( vk == 'N'# ) && ( ( ::GetKeyState(0x11/*_VK_CTRL*/) & 0x8000 ) ) ) ) {
            		return true;   
        		} 
    		}  
		}
		
		wb.go("http://www.taobao.com") 
	};
	onDetach = function( scOwner ){
		scOwner.delCtrl();
	};

	onSize = function (ltOwner) { 
		ltOwner.adjustCtrl(); 
	};

}

// doc: \sciter-js-sdk-main\demos\usciter\res

wbSciter.html = /**
<html window-frame="extended" window-resizable>
  <header>
    <window-caption role=window-caption>简单的sciter窗口</window-caption>
    <window-buttons>
      <window-button role="window-minimize"></window-button>
      <window-button role="window-maximize"></window-button>
      <window-button role="window-close"></window-button>
    </window-buttons>
  </header>
  
  <style>
	html { 
  		var(accent-color): window-accent-color; 
  		border: window-frame-width solid transparent; 
	}
	
	html:owns-focus {
  		border-color: morph(color(accent-color), opacity:50%);   
	}
	
	html > header { width:*; /*background-color: color(back-color);*/ }
	
	html > header { width:*; flow:horizontal; height:window-caption-height; margin:0; } 
	
	html > header > window-caption { display:block; line-height:window-caption-height; width:*; padding:0 1em; color:color(text-color); }
	
	html > header > window-buttons { display:block; flow:horizontal; width:max-content; height:*; }
		html > header > window-buttons > window-button { 
  		behavior:clickable; 
  		display:block; 
  		height:*; 
  		width:window-button-width; 
  		foreground-size: 11dip;
  		foreground-repeat: no-repeat;
  		foreground-position:50% 50%;
  		stroke:color(text-color);
  		stroke-width:1dip;
  		transition: background-color linear 100ms;
	}
	
	html > header > window-buttons > window-button:hover { 
  		background:rgba(0,0,0,0.25);   
	}
	
	html > header > window-buttons > window-button[role="window-close"] { stroke-width:1.44dip; foreground-image: url(path:M0 0 L10 10 M10 0 L0 10); }
	
	html > header > window-buttons > window-button[role="window-close"]:hover { background:rgb(232,17,35); stroke:#fff; }
	
	html > header > window-buttons > window-button[role="window-maximize"] { foreground-image: url(path:M0 0 H10 V10 H0 Z); }
	
	html[window-state="maximized"] { border-color:transparent; }
	
	html[window-state="maximized"] > header > window-buttons > window-button[role="window-maximize"] { foreground-image: url(path:M0 2 h8 v8 h-8 Z M2 2 v-2 h8 v8 h-2); }
	
	html > header > window-buttons > window-button[role="window-minimize"] { foreground-image: url(path:M0 0 M0 5 H10 M10 10); }
  
  	.web-view{
  		width:*;
  		height:*;
  		background-color:red;
  		behavior: webview;
  	}
  </style>
    
	<body> 
		<div class="web-view"></div>
	</body>
</html>
**/

winform.enableDpiScaling(false)
winform.show();	
win.loopMessage();


注:经测试改变窗口大小出现背景透明并且穿透桌面,可以注释掉  

scOwner.addCtrl

 函数里面的 autoResize=false 以缓解此问题

6 个回复 | 最后更新于 2022-03-23
2022-03-22   #1

谢谢分享

2022-03-22   #2

回复#2 @jacen :

老大,上面代码, 我测试手动快速拖动边框会出现穿透(win10), 点击最大最小化不会

2022-03-22   #3

把自定义控件改为 richedit ,然后调整大小也是出现穿透桌面的情况,代码如下

import win.ui;
/*DSG{{*/
var winform = win.form(text="external 接口";right=927;bottom=559)
winform.add()
/*}}*/


import web.sciter;
var wbSciter = web.sciter( winform );
 
// doc: \sciter-js-sdk-main\demos\usciter\res
import win.ui.ctrl.richedit;  
wbSciter.html = /**
<html window-frame="extended" window-resizable>
  <header>
    <window-caption role=window-caption>简单的sciter窗口</window-caption>
    <window-buttons>
      <window-button role="window-minimize"></window-button>
      <window-button role="window-maximize"></window-button>
      <window-button role="window-close"></window-button>
    </window-buttons>
  </header>
   
  <style>
    html { 
          var(accent-color): window-accent-color; 
          border: window-frame-width solid transparent; 
    }
     
    html:owns-focus {
          border-color: morph(color(accent-color), opacity:50%);   
    }
     
    html > header { width:*; /*background-color: color(back-color);*/ }
     
    html > header { width:*; flow:horizontal; height:window-caption-height; margin:0; } 
     
    html > header > window-caption { display:block; line-height:window-caption-height; width:*; padding:0 1em; color:color(text-color); }
     
    html > header > window-buttons { display:block; flow:horizontal; width:max-content; height:*; }
        html > header > window-buttons > window-button { 
          behavior:clickable; 
          display:block; 
          height:*; 
          width:window-button-width; 
          foreground-size: 11dip;
          foreground-repeat: no-repeat;
          foreground-position:50% 50%;
          stroke:color(text-color);
          stroke-width:1dip;
          transition: background-color linear 100ms;
    }
     
    html > header > window-buttons > window-button:hover { 
          background:rgba(0,0,0,0.25);   
    }
     
    html > header > window-buttons > window-button[role="window-close"] { stroke-width:1.44dip; foreground-image: url(path:M0 0 L10 10 M10 0 L0 10); }
     
    html > header > window-buttons > window-button[role="window-close"]:hover { background:rgb(232,17,35); stroke:#fff; }
     
    html > header > window-buttons > window-button[role="window-maximize"] { foreground-image: url(path:M0 0 H10 V10 H0 Z); }
     
    html[window-state="maximized"] { border-color:transparent; }
     
    html[window-state="maximized"] > header > window-buttons > window-button[role="window-maximize"] { foreground-image: url(path:M0 2 h8 v8 h-8 Z M2 2 v-2 h8 v8 h-2); }
     
    html > header > window-buttons > window-button[role="window-minimize"] { foreground-image: url(path:M0 0 M0 5 H10 M10 10); }
 	
 	#edit{
 		width: *; 
 		height: *; 
 		border: 2px solid red;
 	}

  </style>
     
    <body> 
    	<widget cls="richedit" data-table="{ text='控件文本';multiline=true }" id="edit" style="font-size:9pt;"></widget>
    </body>
</html>
**/
 
winform.enableDpiScaling(false)
winform.show(); 
win.loopMessage();


用 sciter.js 里面的 \sciter-js-sdk-main\bin\windows\x32\usciter.exe 

加载原生控件的例子  \sciter-js-sdk-main\samples.sciter\native-behaviors\native-textarea.htm  并且调整窗口大小并没有发现穿透桌面的情况。


usciter.exe 的源码在 \sciter-js-sdk-main\demos\usciter

2022-03-22   #4

我觉得 winform.disableDragFullWindow = true; 最好用, 很多软件都这么做的.松手时候变换大小.

2022-03-22   #5

回复#6 @terrorist :

我发现一个办法, 不要用winfrom , 而是把sciter 放置到一个static或者picturebox静态控件里, 这样就没这个问题了. 完美解决

import web.sciter;
var wbSciter = web.sciter( winform.static);


2022-03-23   #6

回复#11 @jacen :

还真的是, 精简后的代码, 运行无比丝滑

登录后方可回帖

登 录
信息栏
公 告:

专注分享

谢绝纯提问

谢谢合作!
本站域名:HtmLayout.Cn
aardio可以快速开发上位机,本站主要记录了学习过程中遇到的问题和解决办法及aardio代码分享

这里主要专注于aardio学习交流和经验分享.
纯私人站,当笔记本用的,学到哪写到哪.

Aardio 官方站:Aardio官方
Aardio最新功能:Aardio官方更新日志
本 站 主 站:Stm32cube中文网
Sciter中文在线文档Sciter在线学习文档
空间赞助:才仁机械
打赏本站
Loading...