移动端浏览器PDF加载失败：沙箱框架致插件加载错误求助

我编写了showPdf函数用于在页面展示PDF文件，该功能在桌面端运行正常，但在移动端浏览器中出现如下错误：

jquery.1fc733054ddb2e2fcd4a0f763671047b.js:1483 Failed to load 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf' as a plugin, because the frame into which the plugin is loading is sandboxed.

恳请各位技术人员帮忙排查解决，相关代码如下：

JavaScript函数 #

function showPdf(pageUrl) {
  console.log("pdf url", pageUrl)
  var windowWidth = window.matchMedia("(max-width: 1100px)")

  const actualUrl = originUrl + window.location.href.split(homeUrl)[1];
  document.getElementById('pdf-close-block').innerHTML = '';
  document.getElementById('pdf-close-block').innerHTML = '<a class="close__pdf" onclick="addTime(\'' + actualUrl + '\')">Close PDF</a> download';
  document.getElementById('pdf-close-block').style.display = 'block';
  document.getElementById('time-block').innerHTML = '';

  // 判断是否为移动设备
  if (windowWidth.matches) {
    // 移动端使用<embed>替代<iframe>
    document.getElementById('time-block').innerHTML = '<embed src="' + pageUrl + '" width="100%" height="1000px">';
  } else {
    // 桌面端或大屏继续使用<iframe>
    document.getElementById('time-block').innerHTML = '<iframe src="' + pageUrl + '" width="95vw" height="auto"  frameBorder="0" class="page__frame" style="margin-top: 40px;"></iframe>';
  }
  if (document.getElementsByClassName("page__frame")[0]) {
    //document.getElementsByClassName("page__frame")[0].scrollIntoView();
    $('#first_col_1')[0].scrollTo({
      top: 0,
      behavior: 'smooth'
    });
    $('#parent-column')[0].scrollTo({
      top: 0,
      behavior: 'smooth'
    });
    $('#iframe-wrap')[0].scrollTo({
      top: 0,
      behavior: 'smooth'
    });
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  }
}

引入的jQuery #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

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