Question

我有一个带有添加用户按钮的用户页面。当用户单击添加用户按钮时，将调用Ajax load()函数，该函数将加载adduserform。当在Firefox中时，IE可以正常工作。

但是，在chrome中，jQuery Dialog加载时没有错误，但是表单标记没有加载。

<form id="adduser">
    <select id="ptsiid" name="ptsiid" onchange="secondarySiteDisplay();">
        <option value=""></option>
        <option value="1666">London</option>
        <option value="1544">NYC</option>
    </select>First Name:
    <input type="text" name="firstname" value="" size="15" maxlength="60">Last Name:
    <input type="text" name="lastname" value="" size="15" maxlength="60">Job Title:
    <input type="text" name="jobtitle" value="" size="20" maxlength="40">E-mail:
    <input type="text" name="email" value="" size="40" maxlength="128">Can Login?
    <td class="data" align="left">
        <input type="checkbox" name="canlogin">
    </td>Is Deleted?
    <td class="data" align="left">
        <input type="checkbox" name="isdeleted">
    </td>Change Password?
    <td class="data" align="left">
        <input type="checkbox" name="changepassword">
    </td>
    <input class="button" type="button" value="Update" onclick="doAjaxSubmit();" accesskey="">
</form>

Answer 1

你的问题就在这一行

jQuery('#popup').load("form.html", showDialog);

Chrome会强制执行same origin policy，这意味着您的请求将不会被加载，因为它的来源与页面中的其他元素不同。

jQuery's load method上的文档也提到了这一点。

您可以找到有关域名here和here的更好说明。从前一个链接引用的这一段在我看来很好地描述了它。

跨站点HTTP请求是来自a的资源的HTTP请求不同的域而不是发出请求的资源的域。例如，从域A加载的资源（http://domaina.example）例如HTML网页，在域B上请求资源（http://domainb.foo），例如图像，使用img元素（http://domainb.foo/image.jpg）。这在网络上非常常见今天 - 页面以跨站点方式加载大量资源，包括CSS样式表，图像和脚本以及其他资源。

截至今日（2013年8月）this is an open issue in Chrome。

最后，这就是为什么你的代码在chrome中不起作用的原因。

编辑：

Here is a workarround for Chrome.只要您不尝试使用file：// schema加载本地文件，它就会起作用。

编辑，第二部分：

我不确切知道你要做什么，但由于form.html只包含一个表单，你可以把它放在你的头版内。这样你就不必加载外部html。它改变了你做事的方式（它没有加载外部页面），但它在chrome中工作。我还在IE，Safari和Opera中测试过它。无论您决定使用哪种浏览器，它都应该正常工作。

带有工作代码的

Here's a fiddle。

编辑，第三部分：

我认真地建议你坚持上述方法，但......

...如果您确实需要将内容放在外部页面中，并且使用的是php或.NET，则无法使用ajax从服务器获取页面并将其发布到div中。它有点复杂。基本上，您需要在服务器端代码中使用一种方法，该方法将网页作为局部视图提供。在.NET中你会写这样的东西。

public PartialViewResult getForm()
{
   return PartialView("form.html");
}

我不熟悉PHP，但代码应该类似。您还需要一个javascript函数来获取内容并将其放在包含div中：

function loadFrame()
{
    $.ajax({
    url: "@Url.Action("getForm","Form")",
    async: false
    }).done(function( data) {
    $("#popup").append(data);
    // we don't want to show the frame until the user has clicked on the button.
    // so we make it invisible.
    $("#popup").css("display","none"); 
    });
}

Answer 2

以下是JSFiddle中缺少的内容。

1）您错过了添加 jQuery 库。

2）也错过了添加 jQuery UI 。

3）因为你已经将你的代码包装在 load 中，

function addeditUser() {
  jQuery('#popup').load("form.html", showDialog);  
  alert(jQuery('#popup').text());
}

这不起作用。

而是像这样使用

addeditUser = function () {
  jQuery('#popup').load("form.html", showDialog);  
  alert(jQuery('#popup').text());
}

或

将其包裹在 head

中

检查JSFiddle

Answer 3

这可能有助于您尝试这个

尝试将代码包装在$(document).ready()

中

$(document).ready(function(){
   $("#getit").load("form.html #getdiv");
});

chrome中的jQuery加载函数形式

3 个答案: