自動塗りつぶしHTMLフォームが空白ページを返しました

Question

私はPinpoint予約システムプラグインを使用してWordpressウェブサイトで作業しています。私は自動的にjavascriptを使用して予約を記入したいと思います。例としてthis demoとする。ブラウザのinspect要素から、ファーストネームのIDはDOPBSPCalendar-form-field1_1です。そこで、このコードをアドレスバーに入力してテキストを設定してみます。

javascript:document.getElementById('DOPBSPCalendar-form-field1_1').value='first'; 

単語「最初」の空白ページが表示されます。これを解決するには？

Answer 1

フォームがiframe（id = calendar-demo,class = example-demo-iframe）の内側にあるため動作しない理由があります。このページでは、アドレスバーからiframe内の要素をターゲティングすることはできません。

あなたは「IFRAME」を表示し、IFRAMEが存在していることを確認するこのライン、入力することができます。

javascript:alert(document.getElementById('calendar-demo').tagName); 

をしかし、IFRAME内の要素をターゲットとする試みは失敗します。たとえば、次の行を実行しようとします。

javascript:alert(document.getElementById('calendar-demo').innerHTML); 

空白のポップアップウィンドウが表示されます。

UPDATE：

は、ページ全体を変えるからの戻り値を防ぐために、関数呼び出し（またはvoid()）であなたの文をラップし、編集した質問に答えるために。

あなたはこのようにそれを行うことができます：それが指している場合は、ブラウザのクロスオリジンのセキュリティポリシーを使用すると、インラインフレームの内容にアクセスできなくなります

javascript:void(document.getElementById('DOPBSPCalendar-form-field1_1').value='first'); 

Answer 2

：

javascript:(function(){document.getElementById('DOPBSPCalendar-form-field1_1').value='first';})(); 

またはこの別のドメイン。

ただし、このようなiFrameにシリアル化されたデータを送信できるwindow.postMessageメソッドがあります。

otherWindow.postMessage('{greetings: "Hello iFrame content"}', '*'); 

iframe内で実行されているコンテンツにイベントハンドラを設定し、このデータを取得できます。今

window.addEventListener("message", function(data){ 
    console.log(data); 
}, false); 

あなたが探しているデータとの応答としてのiFrame内から（メッセージを送信）同じことを行う場合は、物事は、興味深いものになるだろう。

これらの2つのウィンドウ間に独自のデータ通信プロトコルを設定することで、あなたが望むものを何でもできる多くの可能性が開かれます。

これは、iFrameと親ウィンドウの両方で実行されるコンテンツを制御できる場合にのみ可能です。