现在我正在开发一个小部件，我希望某些人将它放在他们的网站上，该小部件将向他们发送信息并获取一些信息。现在，我让他们在代码中使用以下内容:

<script src="http://myurl.com/widget/widgetscript.js" type="text/javascript"></script>
<div id="example-widget-container"></div>

在 widgetscript.js 中，我有以下内容:

var jsonp_url = "http://myurl.com/widget/external_widget?callback=?";
$.getJSON(jsonp_url, function(data) {
    $('#example-widget-container').html("This data comes from another server: " + data.msg);
});

这里调用的路由调用了我的 WidgetController.php 中的一个函数:

public function external_widget($id) {

    $array = Fan::likes_by_city($id);

    $data = "{msg:'Hello World!'}";

    if(array_key_exists('callback', $_GET)){

        header('Content-Type: text/javascript; charset=utf8');
        header('Access-Control-Allow-Origin: http://www.example.com/');
        header('Access-Control-Max-Age: 3628800');
        header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE');

        $callback = $_GET['callback'];
        echo $callback.'('.$data.');';

    } else {
        // normal JSON string
        header('Content-Type: application/json; charset=utf8');
        echo $data;
    }

我希望这个函数是动态的，这样我就可以为每个使用小部件的用户定制这个函数中的数据(将 $id 作为参数)。我知道我可以像这样用我的路线做到这一点:

Route::get('/widget/external_widget/{id?}', array('uses' => 'WidgetController@external_widget'));

只需将 id 参数添加到 url。

但是，在放置在用户端的代码(脚本和 div)中，我看不出有什么办法让它动态化。有没有办法从脚本或 div 中获取 id 数据，这会改变 widgetscript.js 并因此调用路由？谢谢您的帮助。

最佳答案

您可以像任何请求一样执行此操作:您将参数添加到 url 以自定义请求。

一个简单的示例是将 widgetscript.js 脚本更改为如下内容:

//create a function for your widget. 
//In javascript a function is also a class and this keeps all your variables and settings within your own scope so you dont have to worry about other scripts

//Keep in mind that I do some basic error checking, but not much.
//If you dont check for errors and a user provides wrong information he might get JS errors on his site.
//If you want to have a user friendly widget, make sure you check as much as possible and provide usefull information about the problems.

function MyCoolWidgetClass() {
  //In javascript it is possible to alter the reference to this, EG: using apply
  //To make sure you can always reference your own class, store the reference.
  var self = this;

  //define the basic settings
  self.defaultSettings = {
    container: '#example-widget-container',
    title: "Widget result",
    background: "#ccc",
    userId: 0
  }

  self.settings = {};

  //start your widget
  self.start = function(options) {  
    //merge the provided settings with the default settings
    $.extend(self.settings, self.defaultSettings, options);

    //check if the userid is provided
    //you could add more checks to validate the userId
    if (self.settings.userId==0) {
      alert("We need to know who you are");
      return;
    }

    var jsonp_url = "http://myurl.com/widget/external_widget?userId="+self.settings.userId+"&callback=?";
    $.getJSON(jsonp_url, function(data) {
        //create the response
        //This is just to show how you could use the settings to show a title or anyting else.
        //Again, you could check if the settings are correct.
        var html = '<div class="title">'+self.settings.title+'</div><div class="content" style="background:'+self.settings.background+'">'+data.msg+'</div>';

        //add it to the provided container
        //keep in mind that a user could provide a container like '.items' or 'div' and then it will be added to multiple instances
        $(self.settings.container).html(html);
    });
  }
}
//create a globally approachable instance of your class
window.MyCoolWidget = new MyCoolWidgetClass();

现在用户可以将您的小部件添加到他的站点并提供一些选项。

<script src="http://myurl.com/widget/widgetscript.js" type="text/javascript"></script>
<script>
$(function(){
  //notice that I dont provide a background, and thus the default will be used.
  MyCoolWidget.start({title: "Another title", container: "#mywidgetcontainer", userId: 10});
});
</script>
<div id="mywidgetcontainer"></div>

现在我不确定你的 react 是什么，但在大多数情况下，简单地使用实际的用户 ID 是不可取的。可以简单地使用另一个号码来检查其他人的响应。

由于每个人在访问您的网站(小部件所在的网站)时都可以只看 JS 代码，因此您永远无法真正阻止人们使用其他人的 ID，但如果 ID 是一个长的随机大小写敏感 key ，至少他们无法猜测其他帐户滥用您的服务。例如，如果您限制每个 ID 每天 1000 个请求或类似的东西。

JSFiddle that shows your IP adres using this widget

关于javascript - 如何使用 PHP/JQuery/JSONP 动态进行回调(Laravel 项目)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23463460/