多PDF嵌入iframe时openFullscreen()全屏功能异常的解决求助

当前代码的问题在于openFullscreen()函数固定获取第一个带有fullscreenframe类的iframe，导致所有按钮都只能触发首个PDF的全屏效果。要让每个按钮对应自身关联的iframe，可通过以下两种方案修改：

方案一：传递iframe ID给全屏函数 #

通过给每个按钮的点击事件传入对应iframe的ID，让全屏函数精准定位目标元素：

1. 更新iframe初始化代码，生成按钮时传入对应ID：

jQuery(document).ready(function($){
    $(".node--view-mode-full iframe[src*='.pdf']").each(function (index) {
        $(this).addClass('fullscreenframe');
        $(this).attr('id', 'fullscreen-'+index);
        // 把当前iframe的ID作为参数传入openFullscreen
        $('<button onclick="openFullscreen(\'fullscreen-'+index+'\')">Open in Fullscreen Mode</button>&nbsp;<strong>Tip:</strong> Press the "Esc" key to exit full screen.<br>').insertBefore(this);
    });
});

2. 修改openFullscreen函数，根据ID获取目标iframe：

function openFullscreen(frameId) {
  var elem = document.getElementById(frameId);
  if (!elem) return; // 避免找不到元素时报错
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
};

方案二：使用jQuery事件绑定（推荐） #

直接在生成按钮时绑定点击事件，无需全局函数，逻辑更紧凑且避免内联事件的弊端：

jQuery(document).ready(function($){
    $(".node--view-mode-full iframe[src*='.pdf']").each(function (index) {
        var $targetFrame = $(this).addClass('fullscreenframe').attr('id', 'fullscreen-'+index);
        // 创建按钮并绑定点击事件，直接操作当前关联的iframe
        $('<button>Open in Fullscreen Mode</button>&nbsp;<strong>Tip:</strong> Press the "Esc" key to exit full screen.<br>')
            .insertBefore($targetFrame)
            .on('click', function() {
                var elem = $targetFrame[0];
                if (elem.requestFullscreen) {
                    elem.requestFullscreen();
                } else if (elem.webkitRequestFullscreen) { /* Safari */
                    elem.webkitRequestFullscreen();
                } else if (elem.msRequestFullscreen) { /* IE11 */
                    elem.msRequestFullscreen();
                }
            });
    });
});

内容的提问来源于stack exchange，提问作者Артем