javascript - 单击时加载 Javascript 或 jquery

Question

我有一个包含多个不同 iframe 的页面，这些 iframe 延迟了我的加载时间，因此我希望它们仅在我单击单独的按钮时加载。

正如我现在设置的那样，有“窗口 block ”，并且每个 div 内都有两个同级，即“应用程序链接”和应用程序“窗口”；

这是我的结构(同一页面上有几个类似的“窗口 block ”)

<div class="w-clearfix window-block">
<a class="app-link w-inline-block" data-ix="open-window" href="#" style="transition: all 0.2s ease-in-out 0s;">
<div class="w-clearfix wapps window ui-draggable" data-ix="collapse-on-load" style="transition: color 0.2s ease-in-out 0s, background-color 0.2s ease-in-out 0s; opacity: 0; transform: translateX(0px) translateY(100%) translateZ(6000px); display: none;">

我还使用了一些 jquery 来使窗口可拖动(这与 Windows(或 MacOS)桌面的情况非常相似:快捷方式和窗口。

$( function() {
    $( ".window" ).draggable({ handle: ".window-handle" });  
} ); 

当我用一行代码单击每个同级窗口旁边的按钮时，是否可以加载每个同级窗口？或者我是否必须为每个类/元素添加一个？那行代码是什么？ (如果这听起来很愚蠢，我很抱歉..)

是否也可以在第二次单击时卸载该 div，然后在单击按钮(第三次)时再次重新加载？

当我点击每个窗口时，我还尝试让每个窗口跳转到屏幕顶部(在 Z 上向上移动？)，但这不起作用，有什么建议吗？

非常感谢...

Answer 1

我认为你需要的是 AJAX。单击按钮会向服务器发送请求并将响应 HTML 写入窗口。 W3Schools tutorial非常简单。