JavaScriptブックマークレット: 取得した文字列が正しくフォームから送信できない

実現したいこと

下記のような、Chrome用のブックマークレットを作成しています。

表示中のページの完全なソースコードを取得する
ソースコードを文字列として変数「HTMLsrc」に格納し、後半のスクリプトで作成したフォームから文法チェッカーのサイトへ送信する

前提

仕事で以上のようなブックマークレットを作成しているのですが、何故か正しく取得できているはずのソースコードが、正しく文法チェッカーに送信できないという問題が発生しています。
ブックマークレットそのものは最後まで実行されているためエラーコードなどは表示されていないようなのですが、いざ文法チェッカーで結果が表示されるとDoctypeもHTMLタグも、Bodyタグの中身も反映されていない様子です。

スクリプトに何か問題があるようでしたら、ご教示いただけないでしょうか。

発生している問題・エラーメッセージ

※エラーコードは表示されていないので、代わりに文法チェッカーの結果をコピーしました。

Warning: Consider adding a lang attribute to the html start tag to declare the language of this document.

For further guidance, consult Declaring the overall language of a page and Choosing language tags.
If the HTML checker has misidentified the language of this document, please file an issue report or send e-mail to report the problem.
2. Error: The character encoding was not declared. Proceeding using windows-1252.
3. Error: End of file seen without seeing a doctype first. Expected <!DOCTYPE html>.
4. Error: Element head is missing a required instance of child element title.
Content model for element head:
If the document is an iframe srcdoc document or if title information is available from a higher-level protocol: Zero or more elements of metadata content, of which no more than one is a title element and no more than one is a base element.
Otherwise: One or more elements of metadata content, of which exactly one is a title element and no more than one is a base element.
Document checking completed.

該当のソースコード

JavaScript
1javascript:var HTMLsrc = new XMLSerializer().serializeToString(document.doctype) + document.getElementsByTagName('html')[0].outerHTML;d=document.createElement("form");d.method="POST";d.action="https://validator.w3.org/nu/";d.enctype="multipart/form-data";d.target="_blank";d.acceptCharset="utf-8";document.body.appendChild(d);i = document.createElement('input');i.setAttribute('type', 'hidden');i.setAttribute('value', HTMLsrc);d.appendChild(i);d.submit();

試したこと

そもそもソースコードが正しく取得できていないのではないかと考え確認のために以下のようなブックマークレットを作成・実行してみましたが、問題なく表示されました。

JavaScript
1javascript:let HTMLsrc = new XMLSerializer().serializeToString(document.doctype) + document.getElementsByTagName('html')[0].outerHTML;alert(HTMLsrc);

よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

i = document.createElement('input');i.setAttribute('type', 'hidden');i.setAttribute('value', HTMLsrc);d.appendChild(i);

i に name 属性を付けないと、フォームで送信されません。

投稿2023/02/21 00:12

int32_t

総合スコア21927

numin

2023/02/21 03:13

初歩的なミスをしてしまい申し訳ありません。教えていただいた通り、name属性を付加することで無事送信できるようになりました。ただ、コメント欄で追加質問をしてしまって申し訳ないのですが、ソースコード全てを送信しようとしたところ、「HTTP ERROR 400 Form field value too large.」というエラーページに飛んでしまいました。 Input要素の代わりにTextarea要素を作るようにし、maxlengthを大きく設定してみたのですが、エラーに変化はありません。こちらについても、解決方法をご存知ではないでしょうか。よろしくお願いします。

int32_t

2023/02/21 03:29

追加の質問はしないでください。新しい質問を立てるべきです。 https://github.com/validator/validator/issues/875 によるとフォーム送信の場合の大きさをサーバ側で制限しているようなので、フォームで送る方法ではどうしようもないでしょうね。もしサービスがクロスオリジン対応ならリンク先の回避方法のように HTTP/REST API を使えば回避できるかもしれません。

numin

2023/02/21 03:37

質問を分けずに聞いてしまって申し訳ありません。ご解説していただきありがとうございます。フォーム送信だと回避できないんですね。 HTTP/REST APIが使えるか試してみたいと思います。ありがとうございました。

行動規範の内容に同意します