mobile cannot import HTML

Question

I used to want to import HTML pages in one HTML.

Finally, I work it! chrome, firefox, opera is ok to import it on the desktop.

First way

But safari get problems also, it cannot work on mobile, all the browser cannot load this.

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>    
<script> 
    $(function(){
      $("#1").load("section/1.html");
      $("#2").load("section/2.html"); 
      $("#3").load("section/3.html"); 
      $("#4").load("section/4.html");  
    });
</script> 

<section><div id="1"></div></script>
<section><div id="2"></div></script>
<section><div id="3"></div></script>
<section><div id="4"></div></script>

---------- Second way

By angular.min.js This one can work for Chrome on mobile and desktop, but Safari cannot. It got the error to load the first section, don't know why...

<div ng-app="">
<section ng-include="'1.html'" data-0="transform: translateX(300px);" data-300="transform: translateY(0px)></section>
<section ng-include="'2.html'"></section>
<section ng-include="'3.html'"></section>
<section ng-include="'4.html'"></section>
</div>

https://stackoverflow.com/questions/7244387/building-a-single-page-compatible-for-mobile-where-to-start this might help you out. — R.D, Aug 16 '18 at 13:02
there is no error message but only safari and all mobile cannot load html pages — Oly, Aug 16 '18 at 13:19
it's because your closing tags are script closing tags not section closing tags - fix your html — Pete, Aug 16 '18 at 13:32
thanks Pete, I fix skrollor, but for mobile only use second way can load, but it got problem when load first seciton — Oly, Aug 16 '18 at 13:50
Finally, I fix it, but still got some bug, I re-edit it into my questions — Oly, Aug 16 '18 at 13:57

score 0 · Answer 1 · answered Aug 16 '18 at 13:01

0

In the old days (HTML4), the 'id' attribute needed to start with a letter. That restriction was lifted in HTML5.

Perhaps there is a compatibility problem with Safari mobile.

Change your 'id' attributes to start with a letter, and see if that helps.

answered Aug 16 '18 at 13:01

TheVirtuoid

100
6

score 0 · Answer 2 · answered Aug 16 '18 at 13:05

0

Your script can be executed before targeted html tags are loaded. Add the whole loading thing into document.ready() callback.

$(document).ready(function(){
   $("#1").load("section/1.html");
   $("#2").load("section/2.html"); 
   $("#3").load("section/3.html"); 
   $("#4").load("section/4.html"); 
});

Also in your example you have a mess with html opening/closing tags

answered Aug 16 '18 at 13:05

Eriks Klotins

4,042
1
12
26

1

`$(function() {});` is equivalent to `$(document).ready(function(){});` – Unmitigated Aug 16 '18 at 13:06

score 0 · Accepted Answer · answered Aug 18 '18 at 14:42

Anyway way By angular.min.js this one works
<div ng-app="">
    <section ng-include="'1.html'" data-0="transform: translateX(300px);" data-300="transform: translateY(0px)></section>
    <section ng-include="'2.html'"></section>
    <section ng-include="'3.html'"></section>
    <section ng-include="'4.html'"></section>
    </div>

mobile cannot import HTML

3 Answers3