sciter.js 嵌入 web.view
By
terrorist
at 2022-03-22 • 0人收藏 • 1025人看过
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
把自定义控件改为 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
登录后方可回帖
谢谢分享