使用JSONP和PHP调用外部html文件

Question

It is possible this question might be a little vague for the liking of many people here, but my knowledge of the topic is vague also, and despite some searching I have not been able to find anywhere online with clear instructions on how to do this although (in my view) it should probably be one of the simpler cross-domain JSONP operations.

I will explain what I am trying to do. I am trying to retrieve the contents of a HTML file on an external server using both JSONP and a PHP script. I have access to the server - my PHP script is as follows:

    <?php
    $callback = '';
    if (isset($_GET['callback']))
    {
    $callback = filter_var($_GET['callback'], FILTER_SANITIZE_STRING);
    }
    $html = include($callback);
    echo $callback . '('.json_encode($html).');';
    ?>

Using this it seems that when I type www.myurl.com/myscript.php?callback=filename.html , the correct file is displayed (although, for some reason, the ?callback is duplicated in the address, and the filename is appended to the end of the output displayed...

I have tried a few different scripts for my HTML file but currently have the following...

    function request_jsonp(){
    var script = document.createElement('script');
    var url = 'http://www.myurl.com/myscript.php?callback=filename.html';
    script.setAttribute('src', url);
    document.getElementsByTagName('head')[0].appendChild(script);
    }

Now obviously this doesn't work because the output of the PHP script isn't a working function of any sort, but I am not sure of the best way to go about making it one. I would like to somehow wrap the output in something like this:

    function DisplayOutput() {
        document.getElementById('output').innerHTML = ...external HTML goes here!... ;
    }

...but currently I'm really not sure of the best way to do this.

Any help would be very much appreciated.

Answer 1

callback needs to be the name of the callback function. You should generate a unique one each time the function is called.

You should use a second, different query string variable to determine what URI to fetch.

var jsonp_counter = 0;

function request_jsonp(url, callback){
    jsonp_counter++;
    var callback_name = "jsonp_function_" + jsonp_counter;
    window[callback_name] = callback;

    var jsonp_url = 'http://www.myurl.com/myscript.php" +
              "?callback=" + encodeURIComponent(callback_name) +
              "&url=" + encodeURIComponent(url);

    var script = document.createElement('script');
    script.setAttribute('src', url);
    document.getElementsByTagName('head')[0].appendChild(script);
}

request_jsonp("filename.html", function (data) {
     do_something_with(data);
});