html <object>無法 fullscreen

javascrpit html5

sinceremei 2019-05-28 11:35:14 ‧ 2496 瀏覽

分享至

index.html
html

<body onload="init();">
     <div>
          <button></button>
     </div>
     <div id="subMenuDiv" name="subMenuDiv" src="" style=""></div>
    </div>
</body>

javascript

function OptionsElement(path) {
    console.log("path=",path);
    switch(path){
        case "Live":
            document.getElementById("subMenuDiv").innerHTML = '<object type="text/html" data="test01.html" width="100%" height="100%"></object>';
        break;
    }
}

我用這樣的方式將兩個網頁結合在一起，現在我做了一個fullscreen功能的按鈕在另一個網頁中
test01.html
html

<canvas  id="fullScreenTarget"></canvas>
<button onclick="doFullScreen()">XXX</button>

javascript

function doFullScreen(){
    var elem = $("#fullScreenTarget")[0];
    var isFullScreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
    if( !isFullScreen ){
        if (elem.requestFullscreen) {
            elem.requestFullscreen();
        } else if (elem.msRequestFullscreen) {
            elem.msRequestFullscreen();
        } else if (elem.mozRequestFullScreen) {
            elem.mozRequestFullScreen();
        } else if (elem.webkitRequestFullscreen) {
            elem.webkitRequestFullscreen();
        }
    }else{
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        }
    }
}
$(document).on("mozfullscreenchange webkitfullscreenchange fullscreenchange", fullscreenChange);
function fullscreenChange(){
    var isFullScreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
    if( !isFullScreen ){
        $("#fullScreenTarget").width("");
    }else{
        $("#fullScreenTarget").width("100%");
    }
}

但是fullscreen功能的按鈕無法動作，而我單獨開啟test01.html的時候fullscreen功能的按鈕是可以動作的，我查了一下，原本<object>原本確實無法用我的方式來達成fullscreen，但後來有人說已修正這問題，但我現在網頁依然無法做到fullscreen，有人能幫我解答嗎??

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

ccutmis

iT邦高手 2 級 ‧ 2019-05-28 12:21:10

最佳解答

兩個建議:
㊀＜div id="subMenuDiv" name="subMenuDiv" src="" style=""＞
div src=???? 請不要幫html元素自創屬性網路上很多管道可以查的例如:
https://www.w3schools.com/tags/ref_standardattributes.asp
這種小細節要多留意，能讓你少繞一些路。

㊁別用object 改用 iframe 我試過沒問題
底下範例把iframe ... src="" 內容換成"test01.html" 應該是能正常運作

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
<script>
/* Get the element you want displayed in fullscreen */ 
/* Function to open fullscreen mode */
function openFullscreen(targetId) {
  var elem = document.getElementById(targetId);
  if (elem.requestFullscreen) {
  elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) { /* Firefox */
  elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
  elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE/Edge */
  elem.msRequestFullscreen();
  }
}
</script>
</head>
<body>
<button onclick="openFullscreen('subMenuDiv')">[ FULL::SCREEN ]</button>
<div id="subMenuDiv" name="subMenuDiv" style=""></div>
<script>
$("#subMenuDiv").html('<iframe width="100%" height="100%" src="https://www.youtube.com/embed/bCgJjYT1qpM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>');
</script>
<p>Note: Internet Explorer 10 and earlier does not support fullscreen mode.</p>
</body>
</html>

回應 4
分享
檢舉

看更多先前的回應...收起先前的回應...

sinceremei iT邦新手 5 級 ‧ 2019-05-28 13:50:31 檢舉

以大大的改法應該是單一個html檔吧!?
我有測試過，在單獨一個html檔時，我確實能做到fullscreen，但是我現在有兩個html檔，我從首頁(index.html)拉進test01.html後，點選fullscreen功能按鈕(寫在test01.html中的)fullscreen卻無法動作，我不知道是甚麼原因導致我從主頁呼叫有寫fullscreen功能的頁面後點選fullscreen功能按鈕，fullscreen會無法動作。

ccutmis iT邦高手 2 級 ‧ 2019-05-28 14:21:46 檢舉

我的疑問是你為何要把fullscreen功能寫在被崁入的test01.html
index.htm跟test01.htm不都是你自己寫的嗎?
上面給的範例就等於是你的index.htm，
另外你想做的那個也不是辦不到，
(但個人通常不會考慮這樣作)
我另外寫了一個範例，你可以試試看:
index.htm

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
<script>
/* Get the element you want displayed in fullscreen */ 
/* Function to open fullscreen mode */
function openFullscreen(targetId) {
  var elem = document.getElementById(targetId);
  if (elem.requestFullscreen) {
  elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) { /* Firefox */
  elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
  elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE/Edge */
  elem.msRequestFullscreen();
  }
}
</script>
</head>
<body>
<button onclick="openFullscreen('subMenuDiv')">[ FULL::SCREEN ]</button>
<div id="subMenuDiv" name="subMenuDiv" style=""></div>
<script>
$("#subMenuDiv").html('<iframe width="100%" height="100%" src="test001.htm" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>');
</script>
<p>Note: Internet Explorer 10 and earlier does not support fullscreen mode.</p>
</body>
</html>

test001.htm

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8" />
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
<script>
/* Get the element you want displayed in fullscreen */ 
/* Function to open fullscreen mode */
function openFullscreen(targetId) {
  var elem = document.getElementById(targetId);
  if (elem.requestFullscreen) {
  elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) { /* Firefox */
  elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
  elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE/Edge */
  elem.msRequestFullscreen();
  }
}
</script>
<style>body{background:#666;}</style>
</head>
<body>
<button onclick="openFullscreen('subMenuDiv1')">呼叫test001.htm本身的 openFullscreen函式</button>

<button onclick="window.parent.openFullscreen('subMenuDiv')">呼叫上層index.htm的 openFullscreen函式</button>
<div id="subMenuDiv1" name="subMenuDiv1" style=""></div>
<script>
$("#subMenuDiv1").html('<iframe width="100%" height="100%" src="https://www.youtube.com/embed/bCgJjYT1qpM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>');
</script>

</body>
</html>

從index.htm點的fullscreen會看到影片及兩個按鈕
從index.htm裡的iframe.src"test001.htm"點的兩個按鍵，
一個是直接call test002.htm裡的fullscreen
(會看到只有影片變全屏)
另一個按鈕則是call上層index.htm的fullscreen
(會看到結果跟你點index.htm的fullscreen按鈕一樣結果)

DEMO網址
http://www.web3d.url.tw/testFS/

我的疑問是你為何要把fullscreen功能寫在被崁入的test01.html
index.htm跟test01.htm不都是你自己寫的嗎?
上面給的範例就等於是你的index.htm，
另外你想做的那個也不是辦不到，
(但個人通常不會考慮這樣作)
我另外寫了一個範例，你可以試試看:
index.htm
```
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
<script>
/* Get the element you want displayed in fullscreen */ 
/* Function to open fullscreen mode */
function openFullscreen(targetId) {
  var elem = document.getElementById(targetId);
  if (elem.requestFullscreen) {
  elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) { /* Firefox */
  elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
  elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE/Edge */
  elem.msRequestFullscreen();
  }
}
</script>
</head>
<body>
<button onclick="openFullscreen('subMenuDiv')">[ FULL::SCREEN ]</button>
<div id="subMenuDiv" name="subMenuDiv" style=""></div>
<script>
$("#subMenuDiv").html('<iframe width="100%" height="100%" src="test001.htm" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>');
</script>
<p>Note: Internet Explorer 10 and earlier does not support fullscreen mode.</p>
</body>
</html>

```

test001.htm
```
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8" />
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
<script>
/* Get the element you want displayed in fullscreen */ 
/* Function to open fullscreen mode */
function openFullscreen(targetId) {
  var elem = document.getElementById(targetId);
  if (elem.requestFullscreen) {
  elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) { /* Firefox */
  elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
  elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE/Edge */
  elem.msRequestFullscreen();
  }
}
</script>
<style>body{background:#666;}</style>
</head>
<body>
<button onclick="openFullscreen('subMenuDiv1')">呼叫test001.htm本身的 openFullscreen函式</button>

<button onclick="window.parent.openFullscreen('subMenuDiv')">呼叫上層index.htm的 openFullscreen函式</button>
<div id="subMenuDiv1" name="subMenuDiv1" style=""></div>
<script>
$("#subMenuDiv1").html('<iframe width="100%" height="100%" src="https://www.youtube.com/embed/bCgJjYT1qpM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>');
</script>

</body>
</html>
```
從index.htm點的fullscreen會看到影片及兩個按鈕
從index.htm裡的iframe.src"test001.htm"點的兩個按鍵，
一個是直接call test002.htm裡的fullscreen
(會看到只有影片變全屏)
另一個按鈕則是call上層index.htm的fullscreen
(會看到結果跟你點index.htm的fullscreen按鈕一樣結果)

DEMO網址
http://www.web3d.url.tw/testFS/

修改

sinceremei iT邦新手 5 級 ‧ 2019-05-28 15:03:09 檢舉

我之所以要那樣做是因為我的畫面只會有一個
中間有一個深色框框，那正是我要嵌入其他頁面的地方，所以我才會把fullscreen寫在test01.html中，我先用大大的方式再試試，感謝您

ccutmis iT邦高手 2 級 ‧ 2019-05-28 15:45:28 檢舉

好的~加油~

登入發表回應

dragonH

iT邦超人 5 級 ‧ 2019-05-28 12:13:13

官方文件

中文版

w3 spec

節錄

只有包含在顶层文档（top-level document）内部的标准HTML元素、<svg>元素和<math>元素，以及拥有allowfullscreen属性的iframe的内部元素可以进入全屏模式。这意味着在frame内部的元素，以及object的内部元素不能进入全屏模式。

但 iframe 實測可以

且沒照 spec 加上 allowfullscreen的 attr 也可以

index.html

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body onload="init();">
  <div>
    <button id="myBtn">myBtn</button>
  </div>
  <div id="subMenuDiv" name="subMenuDiv" style="height: 80vmin"></div>
  </div>
</body>
<script>
  function OptionsElement(path) {
    console.log("path=", path);
    switch (path) {
      case "Live":
        document.getElementById("subMenuDiv").innerHTML = '<object type="text/html" data="test01.html" width="100%" height="100%"></object>';
        break;
    }
  }
  function init() {
    console.log('Does anyone see my init() function ???');
  }
  const myBtn = document.getElementById('myBtn');
  myBtn.addEventListener('click', (e) => {
    console.log('I don\'t know how to call OptionsElement()!!!');
    document.getElementById("subMenuDiv")
      .innerHTML = '<iframe src = "test01.html" width="100%" height="100%"></iframe>';
  });
</script>
</html>

test01.html

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <script src = "https://code.jquery.com/jquery-3.4.1.min.js"></script>
  </head>
  <body>
    <canvas id="fullScreenTarget"></canvas>
    <button onclick="doFullScreen()">XXX</button>
    <script>
      function doFullScreen() {
        var elem = $("#fullScreenTarget")[0];
        var isFullScreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
        if (!isFullScreen) {
          if (elem.requestFullscreen) {
            elem.requestFullscreen();
          } else if (elem.msRequestFullscreen) {
            elem.msRequestFullscreen();
          } else if (elem.mozRequestFullScreen) {
            elem.mozRequestFullScreen();
          } else if (elem.webkitRequestFullscreen) {
            elem.webkitRequestFullscreen();
          }
        } else {
          if (document.exitFullscreen) {
            document.exitFullscreen();
          } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
          } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
          } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
          }
        }
      }
      $(document).on("mozfullscreenchange webkitfullscreenchange fullscreenchange", fullscreenChange);
      function fullscreenChange() {
        var isFullScreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
        if (!isFullScreen) {
          $("#fullScreenTarget").width("");
        } else {
          $("#fullScreenTarget").width("100%");
        }
      }
    </script>		
  </body>
</html>