单击下一步按钮时自动调整为全屏

Question

我正在尝试将一些 javascript 代码插入到 qualtrics 中。我希望它在用户按下“下一步”按钮后调整用户浏览器的大小（这是在一个简短的声明告诉用户用户的浏览器将被调整大小之后）。当我在自己的浏览器中使用 HTML 文件运行此代码时，它可以工作。但是，它在 qualtrics 中不起作用。我知道它正确地抓取了“NextButton”元素，因为我使用基本警报测试了按钮单击。有谁知道 qualtrics 中是否有东西阻止了这个全屏功能？有没有办法绕过它？我的 Javascript 代码粘贴在下面。提前致谢！

Qualtrics.SurveyEngine.addOnload(function()
{

$("#NextButton").click( function()
{
    alert("hi");
    launchIntoFullscreen(document.documentElement); 

});


function launchIntoFullscreen(element) {
  if(element.requestFullscreen) {
    element.requestFullscreen();
  } else if(element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if(element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if(element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}   

});

Answer 1

我认为您的 NextButton 单击处理程序和 Qualtrics NextButton 单击处理程序之间存在冲突。 Qualtrics 赢了。

我之前处理过类似情况的方法是隐藏 Qualtrics NextButton，并添加我自己的按钮，以便在单击 Qualtrics NextButton 之前执行我需要的任何代码。

类似这样的：

Qualtrics.SurveyEngine.addOnload(function () {

$('NextButton').hide();
$('NextButton').insert({
    before: "<input id=\"checkButton\" type=\"button\" value=\"  >>  \" title=\"  >>  \">"
}); 
$('checkButton').onclick = function fullScreen() {
    launchIntoFullscreen(document.documentElement); 
    $('NextButton').click();
};

function launchIntoFullscreen(element) {
      if(element.requestFullscreen) {
        element.requestFullscreen();
      } else if(element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if(element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
      } else if(element.msRequestFullscreen) {
        element.msRequestFullscreen();
      }
}       

});

Answer 2

您应该检查 Qualtrics 中是否确实支持该 Web API。

试试 Modernizer 或类似的东西。 how to detect a browser supports requestFullscreen

如果实际支持，则该元素无效并且 requestfullscreen 没有被调用。