sciter.js 嵌入 web.view
By
terrorist
at 2022-03-22 • 0人收藏 • 994人看过
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
登录后方可回帖
谢谢分享