html - Viewing local saved HTML5 and javascript in ios14

Question

I know very little about HTML5 and Javascript, however what i have used to work on ios13. The background is that i have a Python script that analyzes a dataset and then writes an html file to save as a report. The HTML file contains the Javascript and CSS rather than referencing external .js and .css files. The images are encoded as base64 to allow them to be embedded in the HTML. This allows one single file that can be saved, emailed etc.

Prior to ios14 when someone emailed me the output html i could open it on my iphone and open the various sections (uses javascript). However since ios14 i can longer get the sections to open so assume that ios14 is blocking the javascript from working in an html preview. If i put one of these HTML files onto a webserver and navigate to them via Safari, then the javascript works fine. Below is javascript used, i took the function from W3C schools examples IRC.

<script>
<var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
}

function changeImage(element) {
  document.getElementById('imageReplace').src = element;
}
    </script>

The CSS used for the collapsible sections is:

.collapsible {

    cursor: pointer;
    border: none;
    text-align: left;
    outline: none;
}
  
.collapsible:hover {
    background-color: #45484b;
    
}
  
.collapsible:after {
    content: '02B';
    float: right;
}
  
.active:after {
    content: "2212";
}
  
.content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
 }

The individual collapsible sections are created using the following html:

<section id="section_name">
    <h2 class="collapsible">Section Header</h2>
        <div class="content">
All HTML that i want to appear and disappear by clicking on H2
        </div>
</section>

I dont have an Apple developer account so am not sure if there were any security changes in ios14 and what the workaround would be.

Answer 1

等待大神答复