如何不依赖jQuery实现点击按钮后才加载并打开iframe

完整修改后代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Preview Testing</title>
    
</head>
<body>
    <style>
        .buttonDownload {
    display: inline-block;
    position: relative;
    padding: 10px 25px;
    background-color: #1d71ff;
    color: white;
    font-family: sans-serif;
    text-decoration: none;
    font-size: 0.9em;
    text-align: center;
    text-indent: 15px;
   margin: 2px;
    border-radius: 12px;
    align-items: center;
}
.down-button{
    width: 100%;
    text-align: center;
    cursor: pointer;
}
.buttonDownload:hover {
    background-color: #333;
    color: white;
}

.buttonDownload:before, .buttonDownload:after {
    content: ' ';
    display: block;
    position: absolute;
    left: 15px;
    top: 52%;
}

/* Download box shape  */
.buttonDownload:before {
    width: 15px;
    height: 2px;
    border-style: solid;
    border-width: 0 2px 2px;
}

/* Download arrow shape */
.buttonDownload:after {
    width: 0px;
    height: 0px;
   margin-left: 3px;
    margin-top: -7px;

    border-style: solid;
    border-width: 4px 4px 0 4px;
    border-color: transparent;
    border-top-color: inherit;
    animation: downloadArrow 2s linear infinite;
    animation-play-state: paused;
}

.buttonDownload:hover:before {
    border-color: #4CC713;
}

.buttonDownload:hover:after {
    border-top-color: #4CC713;
    animation-play-state: running;
}
.milkparagraph{
    color: #FF4500; 
    font-size: 19px; 
    margin: 15px;
}
.milkdownbox{
    border: 2px solid #365194; 
    padding: 0px 5% 7px 2%; 
    border-radius: 12px;  
    margin: 17px 0% 20px; 
    width: fit-content;
}

/* keyframes for the download icon anim */
@keyframes downloadArrow {
    /* 0% and 0.001% keyframes used as a hackish way of having the button frozen on a nice looking frame by default */
    0% {
        margin-top: -7px;
        opacity: 1;
    }
    
    0.001% {
        margin-top: -15px;
        opacity: 0;
    }
    
    50% {
        opacity: 1;
    }
    
    100% {
        margin-top: 0;
        opacity: 0;
    }
}
    </style>

  

    <div class="syltp">
       

          <script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
    const previewBtn = document.getElementById('button');
    const iframeHolder = document.getElementById('iframeHolder');
    previewBtn.addEventListener('click', function() {
        if (!document.getElementById('iframe')) {
            iframeHolder.innerHTML = '<iframe id="iframe" src="https://drive.google.com/file/d/1GEsC2NXwLjvV4N2JCPqAqAxqMEt3uro0/preview" width="100%" height="400" style="border: 1px solid black;max-width: 700px;display: block;margin: 0 auto;"></iframe>';
        }
    });
});
</script>
           <h4> <span style="font-family: 'Open Sans';"><i aria-hidden="true" class="fa fa-sticky-note"></i>Preview without jquery</span></h4>
          <div class="down-button" id="button"><b class="buttonDownload">PREVIEW</b></div>
          <br />
<div id="iframeHolder"></div>
        
          
        
        </div>

</body>
</html>

修改说明 #

• 完全移除jQuery依赖，改用原生JS实现点击加载逻辑：通过DOMContentLoaded监听DOM加载完成，用addEventListener绑定按钮点击事件，保留原有的「仅首次点击插入iframe」的逻辑，页面初始加载时不会触发iframe资源请求。
• 优化iframe适配性：将iframe宽度改为100%、新增最大宽度限制，避免iframe宽度溢出导致页面横向滚动，从根源减少侧边栏滚动异常的诱因。
• 给按钮容器新增cursor: pointer属性，优化点击交互体验。

侧边栏问题修复方案 #

• 粘性侧边栏无法随主内容滚动：检查侧边栏position:sticky对应的父级容器，确保父容器没有设置固定高度、overflow:hidden/overflow:auto属性，父容器高度会随iframe加载自动撑开后，侧边栏即可正常跟随页面滚动。
• 侧边栏遮挡评论框：给评论框所在的容器添加样式position: relative; z-index: 100;，同时给粘性侧边栏添加样式z-index: 10;，保证评论框层级高于侧边栏即可解决遮挡问题。

内容的提问来源于stack exchange，提问作者ABBAS A M