Question

我不知道从哪里开始，如果有人能指出我正确的方向，我会很感激。我想创建一个简单的表单'widget'，用于嵌入不同的网站。

这个想法是表单驻留在我的服务器上，表单信息将提交到我的服务器上的数据库，但是将嵌入到其他站点上。

**表单包含基于$_GET变量填充的动态下拉菜单。例如，如果我使用iframe，它将看起来像这样......

<iframe src="http://www.example.com/form.php?id=555"></iframe>

我应该使用iframe还是javascript会更好，有更好的方法吗？我需要注意哪些安全问题？

Answer 1

您的最佳解决方案是使用iframe。

您无法使用javascript执行此操作的原因是大多数浏览器有关跨站点脚本的安全策略。

使用iframe，您将能够为最终用户提供一个URL，然后他们就可以将框架定位在任何他们喜欢的位置。我想你会提供一个URL，其中包含每个用户的特定路径，或者一个变量来定义用户。

类似的东西：

<iframe src="http://yourdomain.com/form/?clientid=12345&style=woodgrain"></iframe>

浏览器原始策略的一个问题是网站所有者将无法自己设置表单样式，也无法以任何方式操纵该iframe中的DOM。这可能实际上是对你的祝福或诅咒，取决于具体情况。

如果在提交表单后需要操作，则可以始终让站点使用的脚本具有在第一次迭代期间不执行任何操作的功能，但在第二次迭代时更改iframe源，甚至将其从DOM中删除父网站。这可以通过iframe标记中的onLoad =“”操作完成。

Answer 2

如上所述，跨浏览器安全限制限制了您的替代方案

我知道有4种方法可以解决这个问题。 JsonP可能是最灵活的，但我已将它们全部包含在这里以实现完整性。

1）iframe是最简单的，但您的小部件对包含它的网站的访问权限有限，反之亦然

2）Jsonp =最灵活 - 这可以通过使用标签来实现。您的服务器端代码采用回调参数，并将其标记在它传回的任何json的前面。

php中的示例

 <?php
header("content-type: application/json"); 

$json = array('example'=>'results');

// Wrap and write a JSON-formatted object with a function call, using the supplied value of parm 'callback' in the URL:
echo $_GET['callback']. '('. json_encode($json) . ')';    

?>

JQuery代码看起来像这样

$.ajax({ url:'http://yourserver.com/ajax.php', 
      dataType:'jsonp',
      success: function(data)
                  { alert(data); }
       });

您的小部件消费者可以复制粘贴，他们需要的javascript，或者更好地通过脚本src调用直接从Web服务器加载它。

3）DNS别名 - 要求您的窗口小部件的所有用户在他们的dns中为您的服务器创建一个条目，使其位于相同的顶级域中。 IE点 - widgetprovider.consumersdomain.com到您的服务器。（你需要一个固定的IP来为所有域设置虚拟主机会很麻烦）你可以用上面的脚本标签加载javascript，但是你不必担心jsonp并且可以使用标准的ajax要求与网站互动。

4）Flash，Silverlight - 可以通过在服务器上包含xml文件来解决跨域策略。

奖金 - 我认为一旦真正发挥作用，你就能用WebSockets做到这一点。

Answer 3

我之前从未做过这样的事情。但您可以使用jQuery从外部链接加载表单。

$("#feeds").load("feeds.html");

你可以使用一些PHP来。

include 'your external path';

然后您的表单可能如下所示：

<form action="yourExternalActionLink" method="post or get">
some tags...
</form>

Answer 4

除了使用iFrame之外，我认为你没有其他选择。

大多数现代浏览器甚至不允许使用ajax / Javascript访问您自己域以外的网站。

你必须使用iframe，只要你想让这些东西驻留在你自己的服务器上以便于更新

Answer 5

我实际上没有尝试过，但是有很多技术可以进行跨域ajax请求。这是一个：http://james.padolsey.com/javascript/cross-domain-requests-with-jquery/。对此的javascript解决方案是这样的：

$.ajax({
    url: 'yoursite.com/forms/272.json?param1=23&param3=df',
    type: 'get',
    success: function (response) {
        //populate a form with response data.
   }
});

所以你在你的服务器上做了一个API，它会抛出JSON关于表单应该是什么样子的东西，把它传递给你需要的任何参数。你得到了JSON，可以随意构建表单。无论如何，那将是javascript解决方案。

但正如其他人提到的跨领域ajax不是你应该做的事情，或者我认为。所以，如果你有兴趣尝试这种方式，我会更多地研究YQL（mod用来做这件事）：http://developer.yahoo.com/yql/

Answer 6

如果你想开箱即用......为什么不尝试Zoho创作者形式？！它易于使用。

http://creator.zoho.com

创建一个php / mysql表单，嵌入许多不同的网站

6 个答案: