Script Editor web part not allowing me to insert code (or cancel)

sharepoint.stackexchange https://sharepoint.stackexchange.com/questions/266401

문제

Whenever I paste the following code into the script editor, instead of it allowing me to click 'insert', the entire window changes into the output of my script. There is no way to circumnavigate this without exiting the page - see error below:

Error occurring

For clarity, have posted my code below (it is a countdown clock, to a specific date).

<!DOCTYPE html>
<html>
  <head>
    <title>APRA Countdown</title>
    <style type="text/css">
    body {
        background: #f6f6f6
    }

    .countdownContainer{
        position: absolute;;
        top: 50%;
        left: 50%;
        transform : translateX(-50%) translateY(-50%);
        text-align: center;
        background: #ddd;
        border: 1px solid #999;
        padding: 10px;
        box-shadow: 0 0 5px 3px #ccc;
    }

    .info {
        font-size: 80px;
    }
    </style>
  </head>
<body>
    <table class="countdownContainer">
        <tr>
            <td colspan="4" class="info">APRA Countdown</td>
        </tr>
        <tr class="info">
            <td id="days">2</td>
            <td id="hours">3</td>
            <td id="minutes">5</td>
            <td id="seconds">7</td>
        </tr>
            <td>Days</td>
            <td>Hours</td>
            <td>Minutes</td>
            <td>Seconds</td>
   </table>
   <script type="text/javascript">

    function countdown(){
        var now = new Date();
        var eventDate = new Date(now.getFullYear(), 7, 19);

        var currentTime = now.getTime();
        var eventTime = eventDate.getTime();

        var remTime = eventTime - currentTime;

        var s = Math.floor(remTime / 1000);
        var m = Math.floor(s / 60);
        var h = Math.floor(m / 60);
        var d = Math.floor(h / 24);

        h %= 24;
        m %= 60;
        s %= 60;

        h = (h < 10) ? "0" + h : h;
        m = (m < 10) ? "0" + m : m;
        s = (s < 10) ? "0" + s : s;

      document.getElementById("days").textContent = d;
      document.getElementById("hours").textContent = h;
      document.getElementById("minutes").textContent = m;
      document.getElementById("seconds").textContent = s;

      setTimeout(countdown, 1000);

   }

   countdown();


</body>
</html>
도움이 되었습니까?

해결책

This is happening because of your CSS(Maybe some already defined classes you are using).

After adding your code, somehow the div with .ms-dlgOverlay class is displayed on browser window which has z-index:1504 and CSS as below(which is blocking you from inserting your code in Script Editor web part):

element.style {
    display: block;
    z-index: 1504;
    width: 1366px;
    height: 490px;
}
.ms-dlgOverlay {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    opacity: 0.4;
    background-color: #999;
    display: none;
}

Copy below code and paste it in Script editor web part:

<table class="countdownContainer">
    <tr>
        <td colspan="4" class="info">APRA Countdown</td>
    </tr>
    <tr class="info">
        <td id="days">2</td>
        <td id="hours">3</td>
        <td id="minutes">5</td>
        <td id="seconds">7</td>
    </tr>
    <tr>
        <td>Days</td>
        <td>Hours</td>
        <td>Minutes</td>
        <td>Seconds</td>
    </tr>
</table>
<script type="text/javascript">
    function countdown() {
        var now = new Date();
        var eventDate = new Date(now.getFullYear(), 7, 19);

        var currentTime = now.getTime();
        var eventTime = eventDate.getTime();

        var remTime = eventTime - currentTime;

        var s = Math.floor(remTime / 1000);
        var m = Math.floor(s / 60);
        var h = Math.floor(m / 60);
        var d = Math.floor(h / 24);

        h %= 24;
        m %= 60;
        s %= 60;

        h = (h < 10) ? "0" + h : h;
        m = (m < 10) ? "0" + m : m;
        s = (s < 10) ? "0" + s : s;

      document.getElementById("days").textContent = d;
      document.getElementById("hours").textContent = h;
      document.getElementById("minutes").textContent = m;
      document.getElementById("seconds").textContent = s;

      setTimeout(countdown, 1000);
    }
   countdown();
</script>

It will work.

Now, inspect the element and try applying the CSS according to your requirement(But make sure you are using your unique classes).

다른 팁

You are missing an end script tag. This breaks the JavaScript in the rest of the page.

   countdown();
</script>

</body>
</html>

While it should not have any impact on your JavaScript, you are also missing some tags around one table row.

        <td>Days</td>
        <td>Hours</td>
        <td>Minutes</td>
        <td>Seconds</td>

Should be

     <tr>
        <td>Days</td>
        <td>Hours</td>
        <td>Minutes</td>
        <td>Seconds</td>
     </tr>

Recheck the rest of your code for parens, braces, semicolons, etc.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 sharepoint.stackexchange
scroll top