收到此錯誤：XMLHttpRequest 無法加載 javascript:newDoc()

Question

我正在使用此腳本打開已經存在的自定義子域。 自從我開始使用 ajax 作為聯系表單后，它就行不通了。

錯誤:(jquery.js:4 XMLHttpRequest 無法加載 javascript:newDoc()。跨源請求僅支持協議方案：http、data、chrome、chrome-extension、https、chrome-extension-resource。）

有人可以幫我解決這個問題嗎？

腳本

<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

發生這種情況的原因是因為您使用了“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();

這也會失敗。 看起來您的表單真正想要的行為是在提交時執行 JavaScript 函數，根本不使用 AJAX。

這將更好地由“提交”事件處理程序處理，例如（使用 jQuery）：

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

如果您確實想在他們單擊提交時發布到該 URL，您可以在提交處理程序中更改操作值。 下面是一個例子：

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 代碼正在監聽提交事件，它可能會在這個新處理程序執行之前攔截它。 為避免這種情況，您還可以在字段上使用“更改”事件處理程序，以非常相似的方式改變表單操作：

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

Answer 2

用這個

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