このエラーが発生しました：XMLHttpRequestはjavascriptをロードできません：newDoc（）

Question

私はこのスクリプトを使用して、すでに存在するカスタムサブドメインを開きます。私はコンタクトフォームにajaxを使用し始めて以来、動作しません。

ERROR:(jquery.js:4 XMLHttpRequest cannot load javascript:newDoc(). Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.)

誰でも助けてくれますか？

SCRIPT

<script> 
    function newDoc() { 
    window.location.href = "http://" + $("#domain").val() + ".mywebsite.com"; 
}</script> 

HTML

<form action="JavaScript:newDoc()" method="post" role="form" id="login-form" class="cd-form"> 
    <div class="row"> 
    <div class="col-xs-12 text-center sign-in-text"> 
    <p>Enter your company's <span>MyWebsite domain.</span></p> 
    </div> 
<div class="user-box-1 col-xs-8"> 
    <input type="text" name="domain" id="domain" class="form-control" placeholder="Domain" value="" required=""> 
</div> 
<div class="text-domain col-xs-4"> 
    .mywebsite.com 
</div> 
</div> 
<p class="fieldset"> 
<button class="full-width" type="submit">Continue</button> 
</p> 
</form> 

Answer 1

使用この

function newDoc() { 
    return "http://" + $("#domain").val() + ".mywebsite.com"; 
} 

Answer 2

あなたは "javascript：" 形式使用しているので、これが起こっている理由は、URI、およびAJAXを処理はこれをターゲットとして使用しています。これも失敗します

https://jsfiddle.net/L4z0Le4f/

function foo() { 
    return 'https://api.ipify.org/'; 
} 

var xhr = new XMLHttpRequest(); 
xhr.open('GET', 'javascript:foo()'); 
xhr.onload = function() { 
    console.log('Loaded'); 
} 
xhr.onerror = function() { 
    console.log('Failed'); 
} 
xhr.send(); 

：

は、ここでの例です。あなたのフォームが本当に望んでいる振る舞いは、AJAXをまったく使用せずに、submit時にJavaScript関数を実行するように見えます。

これは、より良い（jQueryのを使用して）例えば「提出」イベントハンドラによって処理されます：あなたは、実際に彼らが提出クリックしたときにそのURLに投稿したい場合は、変更することができます

$('#login-form').on('submit', function() { 
    newDoc(); 
    return false; 
}; 

送信ハンドラのアクション値。ここでは例です：もちろん

https://jsfiddle.net/bu1j00Le/

<form action="javascript:alert(1);" method="post"> 
    <input type="text" name="testing" id="q" /> 
    <button type="submit">Make it happen</button> 
</form> 

$('form').on('submit', function() { 
    this.action = '/echo/js/?js=' + encodeURIComponent(JSON.stringify($('#q').val())); 
}); 

、それは内のイベントの火を注文するものに依存 - AJAXコードが提出したイベントをリッスンしている場合は、この新しいハンドラがする前に、それを傍受することがあります。これを避けるには、フィールド上で 'change'イベントハンドラを使用して、非常によく似た方法でフォームアクションを変更することもできます：

$('#domain').on('change', function() { 
    $('#login-form').prop('action', 'http://' + $("#domain").val() + '.mywebsite.com'); 
});