Odd URL Callback performance. How do It know?

Question

I'm studying very closely a YQL query example. There is a html script call to an API url address with callback function identified.

If I include the callback as a separate <script></script> things work fine. It totally fails if the code is contained in a single <script></script> tag.

This works:

<script>
  function top_stories(o) {
    var items = o.query.results.item;
    var output = '';
    var no_items = items.length;
    for (var i = 0; i < no_items; i++) {
      var title = items[i].title;
      var link = items[i].link;
      var desc = items[i].description;
      output += "<h3><a href='" + link + "'>" + title + "</a></h3>" + desc + "<hr/>";
    }
    // Place news stories in div tag
    document.getElementById('results').innerHTML = output;
  }
</script>

<script src='https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20rss%20where%20url%3D%22http%3A%2F%2Frss.news.yahoo.com%2Frss%2Ftopstories%22&format=json&callback=top_stories'></script>

While this next bit fails to function at all.

  <script>
      function top_stories(o) {
        var items = o.query.results.item;
        (... same as above)
        document.getElementById('results').innerHTML = output;
      }

      src='https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20rss%20where%20url%3D%22http%3A%2F%2Frss.news.yahoo.com%2Frss%2Ftopstories%22&format=json&callback=top_stories';
</script>

Non functional jsfiddle: https://jsfiddle.net/ogcoaaff/

Swap a few comments and success: https://jsfiddle.net/ogcoaaff/1/

I don't believe this is a timing / loading sequence issue. No way. I was pretty careful to push the scripts into the jsfiddle HTML box and not the script box. I did not want to use jQuery and have that cloud the discussion.

Can someone explain what's going on here? What am I missing? (Note: I was hoping to run a quick call to a YQL api from totally within a javascript file in another application where I don't have access to <script> calls. (and where I can't use $.JSON and prefer not to use XMLHttpRequest().)

I'd just really would like to understand what is happening here. Anybody know the details (or better yet, a tech reference explaining this behavior?)

Many thanks.

Your "nonfunctional" example is simply invalid syntax. You can't just drop a src attribute into the middle of a script block and expect it to work. — Daniel Beck, Jun 03 '16 at 18:01
Attribute? I thought that was a simple `var`. aaargh! clean up that comment, voice it as an answer, include this link and I'll accept it... https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script — zipzit, Jun 03 '16 at 18:08
No worries, looks like robertklep got there first :) (on rereading my comment sounds a lot snippier than I intended, sorry about that) — Daniel Beck, Jun 03 '16 at 18:15
No offense taken, none what so ever. In hindsight I totally muffed that one up :^) — zipzit, Jun 03 '16 at 18:24

score 2 · Accepted Answer · edited May 23 '17 at 10:29

The <script> element has two relatively distinct uses:

Load external JavaScript:
```
<script src="URL"></script>
```
Embed a piece of JavaScript:
```
<script>
  // code here
</script>
```

Your working example uses both of these uses: one to embed a script into the page (containing the top_stories function), and one to retrieve an external script from Yahoo.

Your non-working example is, simply put, just invalid. The src part is an attribute of the <script> element, so it can only be used with the <script ....> block.

Don't be tempted to think that mixing them properly will work, though:

<script src="URL">
  // code here
</script>

This won't work, or at least won't work reliably (I believe that this isn't even allowed according to the HTML standard).

I was hoping to run a quick call to a YQL api from totally within a javascript file in another application where I don't have access to <script> calls.

You can programmatically create <script> elements. See this question or this question to get an idea on how that would work.

Odd URL Callback performance. How do It know?

1 Answers1