C# と VB.NET の質問掲示板

ASP.NET、C++/CLI、Java 何でもどうぞ

C# と VB.NET の入門サイト

Re[1]: webView2を使いtextBoxの変数をname属性へ


(過去ログ 176 を表示中)

[トピック内 11 記事 (1 - 11 表示)]  << 0 >>

■101103 / inTopicNo.1)  webView2を使いtextBoxの変数をname属性へ
  
□投稿者/ sendmsg (1回)-(2023/01/06(Fri) 23:39:01)

分類:[C#] 

2023/01/06(Fri) 23:39:58 編集(投稿者)
2023/01/06(Fri) 23:39:52 編集(投稿者)

webView2を使い、テキストボックスに記入した文字を指定のname属性の場所に文字を導入をしたいです。

下記のソースコードでは、テキストボックスからの文字をname属性に導入できません。
'test' と文字を予めソースコードに書いていれば問題なく反映されるのですが・・。
どうすれば反映させられるでしょうか?

※特にエラーメッセージなどは発生しておりません。

async private void button2_Click(object sender, EventArgs e)
{

string msg = textBox2.Text;
await webView21.ExecuteScriptAsync("document.getElementsByName('mail')[0].value = " + msg + "; ");

}

version
Microsoft Visual Studio Community 2022 (64 ビット)
引用返信 編集キー/
■101104 / inTopicNo.2)  Re[1]: webView2を使いtextBoxの変数をname属性へ
□投稿者/ Hongliang (1259回)-(2023/01/07(Sat) 00:00:54)
2023/01/07(Sat) 00:04:33 編集(投稿者)

> string msg = textBox2.Text;
> await webView21.ExecuteScriptAsync("document.getElementsByName('mail')[0].value = " + msg + "; ");

msgにhogeが入っているとすると、スクリプトは
document.getElementsByName('mail')[0].value = hoge;
になります。
JavaScriptからみるとhogeという変数の値をvalueに代入せよ、ということで
まあおそらくそんな変数は未定義でvalueにundefinedが代入されているのではないでしょうか。
文字列として代入するなら引用符で囲むような形にしないといけません。
document.getElementsByName('mail')[0].value = 'hoge';

なお、msgに含まれている文字列に引用符が含まれていると構築されるスクリプトも変なことになるので
そういう可能性があるならちゃんとエスケープしたスクリプト文字列になるようにする必要があります。
msg.Replace("'", "\\'")
引用返信 編集キー/
■101105 / inTopicNo.3)  Re[2]: webView2を使いtextBoxの変数をname属性へ
□投稿者/ sendmsg (2回)-(2023/01/07(Sat) 00:09:33)
No101104 (Hongliang さん) に返信
>>string msg = textBox2.Text;
>>await webView21.ExecuteScriptAsync("document.getElementsByName('mail')[0].value = " + msg + "; ");
>
> msgにhogeが入っているとすると、スクリプトは
> document.getElementsByName('mail')[0].value = hoge;

document.getElementsByName('mail')[0].value = msg;
で試してもみてましたが、反応しないままであります。


> 文字列として代入するなら引用符で囲むような形にしないといけません。
> document.getElementsByName('mail')[0].value = 'hoge';

'test'という文字では代入確認済みで、文字列として代入は考えておりません。
できればテキストボックスの値を代入したいと考えてます。

上記のやり方でもできない場合何が考えられるでしょうか?
引用返信 編集キー/
■101106 / inTopicNo.4)  Re[3]: webView2を使いtextBoxの変数をname属性へ
□投稿者/ Hongliang (1260回)-(2023/01/07(Sat) 00:13:21)
> document.getElementsByName('mail')[0].value = msg;
> で試してもみてましたが、反応しないままであります。

え、なんでそんな方向になったんです?
前後に引用符を付けよ、と言ったつもりなんですが。
引用返信 編集キー/
■101107 / inTopicNo.5)  Re[4]: webView2を使いtextBoxの変数をname属性へ
□投稿者/ Hongliang (1261回)-(2023/01/07(Sat) 00:15:45)
2023/01/07(Sat) 00:16:44 編集(投稿者)

string msg = textBox2.Text;
strin script = "document.getElementsByName('mail')[0].value = " + msg + "; ";
Debug.Print(script);
await webView21.ExecuteScriptAsync(script);

のように、構築したスクリプト文字列を表示させてみるなどして、スクリプトとして正しいものになっているか確認されるのをお勧めします。
// 上記で出力されるスクリプトが間違っているのが確認できると思います。
引用返信 編集キー/
■101108 / inTopicNo.6)  Re[1]: webView2を使いtextBoxの変数をname属性へ
□投稿者/ 魔界の仮面弁士 (3525回)-(2023/01/07(Sat) 00:18:15)
2023/01/07(Sat) 00:25:27 編集(投稿者)

No101103 (sendmsg さん) に返信
> string msg = textBox2.Text;
> await webView21.ExecuteScriptAsync("document.getElementsByName('mail')[0].value = " + msg + "; ");

textBox2.Text = "123"; とかの状況であれば、それでも良いですが…。
textBox2.Text = "あいうえお"; などだと、それではマズイですよね。

「document.getElementsByName('mail')[0].value = あいうえお;」になってしまっていますので、
「document.getElementsByName('mail')[0].value = 'あいうえお';」あるいは
「document.getElementsByName('mail')[0].value = "あいうえお";」とする必要があるでしょう。

実際には msg 内に「"」や「'」が含まれる場合に備えて、サニタイジングも必要です。

await webView21.ExecuteScriptAsync($"document.getElementsByName('mail')[0].value = '{textBox1.Text.Replace("'", "\\'")}';");


書き方はいろいろと。

await webView21.ExecuteScriptAsync($"document.getElementsByName('mail')[0].value = '{msg}';");
await webView21.ExecuteScriptAsync($"document.getElementsByName('mail')[0].value = `{msg}`;");
await webView21.ExecuteScriptAsync($"document.getElementsByName('mail')[0].value = \"{msg}\";");
await webView21.ExecuteScriptAsync(@$"document.getElementsByName('mail')[0].value = ""{msg}"";");
await webView21.ExecuteScriptAsync($"document.getElementsByName('mail')[0].value = \u0022{msg}\u0022;");

await webView21.ExecuteScriptAsync("document.getElementsByName('mail')[0].value = '" + msg + "';");
await webView21.ExecuteScriptAsync("document.getElementsByName('mail')[0].value = `" + msg + "`;");
await webView21.ExecuteScriptAsync("document.getElementsByName('mail')[0].value = \"" + msg + "\";");
await webView21.ExecuteScriptAsync(@"document.getElementsByName('mail')[0].value = """ + msg + @""";");
引用返信 編集キー/
■101109 / inTopicNo.7)  Re[4]: webView2を使いtextBoxの変数をname属性へ
□投稿者/ sendmsg (3回)-(2023/01/07(Sat) 00:19:31)
2023/01/07(Sat) 00:22:52 編集(投稿者)
2023/01/07(Sat) 00:22:44 編集(投稿者)

間違えました
引用返信 編集キー/
■101110 / inTopicNo.8)  Re[5]: webView2を使いtextBoxの変数をname属性へ
□投稿者/ 魔界の仮面弁士 (3526回)-(2023/01/07(Sat) 00:23:20)
No101109 (sendmsg さん) に返信
> string msg = textBox2.Text;
> msg.Replace("'", "\\'");
> await webView21.ExecuteScriptAsync("document.getElementsByName('mail')[0].value = 'msg';") ;

いや、これじゃ駄目ですよ。

Replace は「置換した結果の文字列」を返すメソッドであって、
変数 msg の中身を書き換える効果はありません。

なにより、「〜.value = 'msg';」は、変数 msg の出力ではなく、
文字列「msg」を出力することになってしまいます。


string rawText = textBox2.Text;
string escText = rawText.Replace("'", "\\'");
await webView21.ExecuteScriptAsync($"document.getElementsByName('mail')[0].value = '{escText}';") ;

などとします。

引用返信 編集キー/
■101111 / inTopicNo.9)  Re[5]: webView2を使いtextBoxの変数をname属性へ
□投稿者/ sendmsg (4回)-(2023/01/07(Sat) 00:28:51)
2023/01/07(Sat) 00:29:11 編集(投稿者)

No101110 (魔界の仮面弁士 さん) に返信

初心者ですみません。
できたと思い焦って投稿しちゃいました。
ありがとうございます。
解決済み
引用返信 編集キー/
■101112 / inTopicNo.10)  Re[1]: webView2を使いtextBoxの変数をname属性へ
□投稿者/ WebSurfer (2603回)-(2023/01/07(Sat) 08:49:40)
マルチポスト先: https://teratail.com/questions/d4xkk6d95wprsu
引用返信 編集キー/
■101113 / inTopicNo.11)  Re[6]: webView2を使いtextBoxの変数をname属性へ
□投稿者/ 魔界の仮面弁士 (3527回)-(2023/01/07(Sat) 12:20:27)
No101110 (魔界の仮面弁士) に追記
> string escText = rawText.Replace("'", "\\'");

別案として、AddHostObjectToScript メソッドを使った実装例を書いてみます。

このメソッドを通じて公開したオブジェクトは、JavaScript 側から
chrome.webview.hostObjects のメンバーとして公開されるので、
C# と JavaScript の間で、プロパティやメソッドとしてデータ交換ができます。

これなら、Replace などによる文字列のエスケープ処理を意識する必要もありません。


public partial class Form1 : Form
{
 public Form1()
 {
  InitializeComponent();
  InitializeAsync();
 }

 private Example sendmsg;
 async void InitializeAsync()
 {
  await webView21.EnsureCoreWebView2Async(null);
  sendmsg = new Example { txt = textBox1 };
  webView21.CoreWebView2.NavigationCompleted += (sender, e) =>
  {
   webView21.CoreWebView2.AddHostObjectToScript("sendmsg", sendmsg);
  };
  webView21.CoreWebView2.Navigate("https://www.yahoo.co.jp/");
 }

 private async void button1_Click(object sender, EventArgs e)
 {
  await webView21.ExecuteScriptAsync("(async()=>document.getElementsByName('p')[0].value=await chrome.webview.hostObjects.sendmsg.GetText())();");
 }

 [ClassInterface(ClassInterfaceType.AutoDual)]
 [ComVisible(true)]
 public class Example
 {
  public TextBox txt { get; internal set; }
  public string GetText() => txt.Text;
 }
}
引用返信 編集キー/


トピック内ページ移動 / << 0 >>

このトピックに書きこむ

過去ログには書き込み不可

管理者用

- Child Tree -