在chrome中使用jQuery加载函数表单 [英] jQuery load function form in chrome

问题描述

我有一个用户页面和一个添加用户按钮。
当用户点击添加用户按钮时，会调用一个Ajax load（）函数，该函数加载一个 adduserform 当在Firefox中，IE浏览器工作。然而，在chrome中，jQuery Dialog加载没有错误，但表单标签不加载。

jsFiddle with the front

 < form id =adduser> 
< select id =ptsiidname =ptsiidonchange =secondarySiteDisplay（）;> 
< option value =>< / option> 
< option value =1666>伦敦< / option> 
< option value =1544> NYC< / option> 
< / select>名字：
< input type =textname =firstnamevalue =size =15maxlength =60>姓氏：
< input type =textname =lastnamevalue =size =15maxlength =60>职位名称：
< input type =textname =jobtitle value =size =20maxlength =40>电子邮件：
< input type =textname =emailvalue =size =40maxlength = 128>可以登录吗？ 
< td class =dataalign =left> 
< input type =checkboxname =canlogin> 
< / td>是否被删除？ 
< td class =dataalign =left> 
< input type =checkboxname =isdeleted> 
< / td>更改密码？ 
< td class =dataalign =left> 
< input type =checkboxname =changepassword> 
< / td> 
< input class =buttontype =buttonvalue =Updateonclick =doAjaxSubmit（）; ACCESSKEY =  > 
< / form> 
  

解决方案

您的问题在这一行

  jQuery（'＃popup'）。load（form.html，showDialog）; 
  

Chrome强制执行同源策略，这意味着您的请求将不会被加载，因为它的起源不同于页面中的其他元素。

有关 jQuery加载方法的文档也提到了这一点。

您可以更好地了解某个域名是什么此处和这里。

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

截至今天（2013年8月）。

/ p>

最后，这就是为什么你的代码不能用chrome。

编辑： p>

这是一个workarround for Chrome。只要您不尝试使用file：//模式加载本地文件，它就会工作。

编辑，第二部分：

我不确切知道你在做什么，但是由于form.html只包含一个表单，所以你可以把你的头版。这样你就不必加载外部html。
它改变了你一直在做的事情（它不会加载一个外部页面），但它可以在Chrome中运行。我也在IE，Safari和Opera上测试过它。所以它应该工作，无论你决定使用哪个浏览器。

这是小工具，带有工作代码。

编辑，第三部分：

I认真地推荐你坚持上面的方法，但... ...

...如果你真的需要把你的内容放在一个外部页面，并且你正在使用像PHP或.NET的东西，你不能从服务器使用Ajax获取你的网页，并将它们发布到你的div中。它有点复杂。基本上你需要在服务器端代码中有一个方法，以网页的形式作为局部视图。
在.NET中，你会写这样的东西。

  public PartialViewResult getForm（）
 {
返回PartialView（form.html）; 
} 
  

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

  function loadFrame（） 
 {
 $ .ajax（{
 url：@ Url.Action（getForm，Form），
 async：false 
}）。 done（function（data）{
 $（＃popup）。append（data）; 
 //我们不想在用户点击按钮之前显示框架。 $ b //所以我们使它不可见。
 $（＃popup）。css（display，none）; 
}）; 
} 
  

I have a users page with an add user button. When the user clicks add user button an Ajax load() function is called, which loads a adduserform When in firefox, IE this works.

However, When in chrome the jQuery Dialog loads without errors but the form tag does not load.

jsFiddle with the front

<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>

解决方案

Your problem is in this line

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

Chrome enforces the same origin policy wich means that your request will not be loaded because it has a different origin than the other elements in the page.

The documentation on jQuery's load method also mentions this.

You can find a better description of what a domain is here and here. This paragraph, quoted from the former link, describes it quite well in my opinion.

Cross-site HTTP requests are HTTP requests for resources from a different domain than the domain of the resource making the request. For instance, a resource loaded from Domain A (http://domaina.example) such as an HTML web page, makes a request for a resource on Domain B (http://domainb.foo), such as an image, using the img element (http://domainb.foo/image.jpg). This occurs very commonly on the web today — pages load a number of resources in a cross-site manner, including CSS stylesheets, images and scripts, and other resources.

As of today (August 2013) this is an open issue in Chrome.

And that, at last, is why your code doesn't work in chrome.

EDIT:

Here is a workarround for Chrome. It will work as long as you don't try to load local files using the file:// schema.

EDIT,Part II:

I don't know exactly what you're trying to do, but since form.html only contains a form, you can put inside of your front page. That way you don't have to load an external html. It changes the way you've been doing things (it doesn't load an external page) but it works in chrome. I also tested it in IE,and Safari, and Opera. So it should be working regardless of wich browser you decide to use.

Here's a fiddle with working code.

Edit, part III:

I seriously recomend you to stick to the above method but...

...in case you really need to place your content in an external page, and you're using something like php or .NET you cant fetch your pages from the server using ajax and post them in your div. Its a bit more complicated. Basically you need to have a method in you server-sided code that serves the webpage as a partial view. In .NET you would write something like this.

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

I'm not familiar with PHP but the code should be something similar. You also need a javascript function to fetch the content and place it inside the containing 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"); 
    });
}

这篇关于在chrome中使用jQuery加载函数表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！