Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

子应用中内联js脚本中document.head的指向好像与基座的head一致 #1201

Open
SepVeneto opened this issue May 9, 2024 · 2 comments
Open

子应用中内联js脚本中document.head的指向好像与基座的head一致 #1201

SepVeneto opened this issue May 9, 2024 · 2 comments

Comments

@SepVeneto
Copy link
Contributor

问题描述

子应用的内联js中操作head会意外的改动宿主环境

子应用

<head>
  <script>
      console.log(window.document === window.rawWindow.document) // false
      console.log(window.document.head === window.rawWindow.document.head) // true
      window.document.head.innerHTML += '<meta name="viewport" content="width=device-width, initial-scale=1.0" />'
  </script>
</head>

复现步骤

克隆复现仓库

pnpm i
cd packages/base
pnpm dev

cd packages/micro
pnpm dev

访问http://localhost:8987

注释packages/micro/index.html第12行，并取消注释第10行

在控制台中会观察到子应用的document与宿主环境的document指向不一致，但是document中的head指向是一致的。

同时子应用中没有添加的meta标签，反而这个标签出现在了基座的head中。

上传截图

image

image

复现仓库

microapp-demo

环境信息

  • micro-app版本：1.0.0-rc.5
  • 主应用前端框架&版本：vue&3.4.27
  • 子应用前端框架&版本：vue&3.4.27
  • 构建工具&版本：vite&5.2.11
@bailicangdu
Copy link
Member

head、body、html全局唯一，所以子应用的head指向主应用

@SepVeneto
Copy link
Contributor Author

head、body、html全局唯一，所以子应用的head指向主应用

也就是说对于head,body和html来说，在子应用中想要操作只能通过dom上对应的api来实现，如果依赖引用就会泄漏到主应用去。

比如上面的例子，就得依赖appendChild实现

<head>
  <script>
      var meta = document.createElement('meta')
      meta.setAttribute('name', 'viewport')
      meta.setAttribute('content', 'width=device-width, initial-scale=1.0')
      window.document.head.appendChild(meta)
  </script>
</head>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@bailicangdu @SepVeneto