能否不使用script标签定义或调用JavaScript函数？技术咨询

1. Can I define JavaScript functions without using <script> tags? #

Absolutely, though most of these methods are either unconventional or rely on browser behavior rather than strict standards:

• Define directly in inline event attributes: You can declare a function right inside an element's event attribute (like onclick), for example:

  <button onclick="function text(t){alert(t);} text('Hello there!')">Click Me</button>
  

  Keep in mind this function only exists in the scope of that event trigger—it won't be available globally for other elements to use.
• Non-standard <link> trick (not recommended): Some older browsers supported using <link rel="script" href="data:text/javascript,function text(t){alert(t);}"> to load script code without a <script> tag, but this is not part of any HTML standard and is mostly unsupported in modern browsers.
• Dynamic script element creation (sort of loophole): If you're okay with generating a <script> element via JavaScript (instead of writing it statically in your HTML), you can use a Blob to turn function code into a usable URL and load it. But technically, this still uses a <script> element—just not one you wrote directly in your HTML.

2. Can I call a function from an external JS file without using <script> tags (like a <button src="..."> approach)? #

Unfortunately, there's no native HTML way to make a button load an external JS file and call its functions via a src attribute—the <button> element doesn't even have a src attribute to begin with. That attribute is reserved for elements like <script>, <img>, and <iframe>.

That said, there are workarounds that avoid static <script> tags in your HTML (though they still use JavaScript under the hood):

• Dynamically create a <script> element on click: You can generate a script element when the button is clicked, load your external file, and call the function once it's loaded:

  <button onclick="
    const script = document.createElement('script');
    script.src = 'your-external-js-url';
    script.onload = () => text('Hello World');
    document.body.appendChild(script);
  ">Hello World</button>
  

• Fetch the JS code and execute it: Use the Fetch API to grab the text content of your external JS file, then run it with eval() (or new Function()) before calling the function:

  <button onclick="
    fetch('your-external-js-url')
      .then(response => response.text())
      .then(code => {
        eval(code);
        text('Hello World');
      })
  ">Hello World</button>
  

  A quick warning: eval() carries security risks if you're loading code from an untrusted source, so use this cautiously.

内容的提问来源于stack exchange，提问作者LightningJimmy