如何实现点击HTML按钮后在当前页面输出内容，而非打开新空白页面？

页面加载完成后调用document.write()会隐式触发document.open()清空原有文档流，因此必然会覆盖原有页面内容，不要在交互逻辑中使用该方法。可通过操作DOM节点的方式实现页内输出内容的需求，具体实现步骤如下：

• 修正现有按钮的语法错误，你提供的按钮代码中存在冗余双引号，修正后可绑定自定义点击事件处理函数：

<button onclick="handleBtnClick()" id="togglePipButton">START</button>

• 在页面需要展示输出内容的位置预留DOM容器，可自定义样式调整展示效果：

<div id="outputContainer" style="margin: 15px 0; padding: 10px; border: 1px solid #e5e7eb;"></div>

• 编写JS逻辑处理点击事件，同时支持你原有的画中画需求和内容输出需求：

function handleBtnClick() {
  // 执行原有的画中画逻辑
  myVidPlayer.requestPictureInPicture();
  // 执行内容输出逻辑
  const outputBox = document.getElementById('outputContainer');
  // 覆盖原有内容输出
  outputBox.innerText = '画中画模式已启动';
  // 如果需要追加内容不覆盖原有内容，可使用以下逻辑
  // const newP = document.createElement('p');
  // newP.innerText = '本次点击新增的内容';
  // outputBox.appendChild(newP);
}

效果参考 #

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