如何获取外部JS脚本返回值并赋值给HTML元素属性？

直接通过<script>标签引入的外部JS（不管是普通脚本还是.mjs ES模块）本身没有返回值的概念：

• 普通脚本里写顶层return会直接触发语法错误
• ES模块有独立的私有作用域，内部的变量、return结果默认不会对外暴露，无法直接从script标签上拿到脚本内部的返回值。

1. 调整外部JS文件（website_fetch.mjs） #

ES模块规范下，对外暴露内部逻辑用export即可，把你原来的采集逻辑封装后导出：

// website_fetch.mjs
// 封装你原有的信息采集逻辑
const getSiteInfo = async () => {
  // 替换成你实际的采集、数据处理逻辑
  const response = await fetch('你的目标采集地址')
  // 根据返回格式选择resp.json()/resp.text()等解析方法
  const result = await response.text()
  return result
}

// 对外导出采集方法
export default getSiteInfo

2. 调整HTML代码 #

引入ES模块必须给script标签加type="module"属性，等模块加载完成、拿到采集结果后，通过DOM操作给目标<article>标签赋值info属性即可，不要尝试直接在HTML属性位等待脚本返回值：

<script type="module">
  // 导入外部模块的采集方法
  import getSiteInfo from './website_fetch.mjs'

  // 等DOM渲染完成后执行逻辑
  document.addEventListener('DOMContentLoaded', async () => {
    const targetArticle = document.querySelector('article[is="site-status"][name="Google"]')
    try {
      // 执行采集拿到返回值
      const infoValue = await getSiteInfo()
      // 给article的info属性赋值
      targetArticle.setAttribute('info', infoValue)
      // 如果你的自定义元素是通过JS属性而非HTML attribute读取值，直接写 targetArticle.info = infoValue 即可
    } catch (e) {
      targetArticle.setAttribute('info', '信息采集失败')
      console.error('采集异常:', e)
    }
  })
</script>

<section>
  <h2>Info on Google here</h2>
  <ul> 
    <article is="site-status" name="Google"></article>
  </ul>
</section>

• 不推荐把采集结果直接挂到window全局对象上来传值，容易造成全局变量污染，模块导出是ES规范下的标准写法。
• 浏览器有同源策略限制，如果直接在前端请求第三方站点接口，目标站点没有配置对应CORS许可的话请求会被拦截，这种场景需要你加一层后端代理做请求转发，不要纯前端跨域爬取第三方内容。
• 如果你写的site-status自定义元素需要响应info属性的变化，记得在自定义元素类里配置observedAttributes监听info属性，在attributeChangedCallback回调里触发视图更新。

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