Question

在我调整窗口大小之前，我插入的innerHTML不会显示在浏览器上。这是我遇到问题的网站：http://www.granthpark.me/outside

<h1 id="mainz">
  <script>
    jQuery(document).ready(function($) {
      $.ajax({
      url : "http://api.wunderground.com/api/c1ea49b3e06dc3b3/geolookup/conditions/q/CA/San_Francisco.json",   
      dataType : "jsonp",
      success : function(parsed_json) {
      var weather = parsed_json['current_observation']['weather'];
      console.log(weather);
      if (weather == "Patches of Fog" || weather == "Shallow Fog" || weather == "Partial Fog" || weather == "Overcast" || weather == "Clear" || weather == "Partly Cloudy" || weather == "Mostly Cloudy" || weather == "Scattered Clouds" || weather == "Light Mist" || weather == "Heavy Mist") { 
      document.getElementById("mainz").innerHTML = "The weather at Outside Lands is OKAY!";
      }
      else {
        document.getElementById("mainz").innerHTML = "The weather at Outside Lands sucks right now.";
      }
    }
      });
    });
    </script>
</h1>
<p id="weather" style="font-size:30px;">
    <script>
    jQuery(document).ready(function($) {
      $.ajax({
      url : "http://api.wunderground.com/api/c1ea49b3e06dc3b3/geolookup/conditions/q/CA/San_Francisco.json",
      dataType : "jsonp",
      success : function(parsed_json) {
      var location = parsed_json['location']['city'];
      var temp_f = parsed_json['current_observation']['temp_f'];
      var weather = parsed_json['current_observation']['weather'];
      document.getElementById("weather").innerHTML = "Current temperature in " + location + " is " + temp_f + "&#176" + "F" + " and it's " + weather.toLowerCase() + ".";
      }
      });
    });
    </script>
</p>

以下是我的CSS：http://www.granthpark.me/assets/css/main.css

Answer 1

确实是奇怪的行为。

它似乎来自您的#wrapper样式表：

删除position:fixed或将其替换为position:absolute，它似乎有效。

不清楚为什么，因为你的css非常复杂。

Answer 2

它适用于Crome和Firefox，但是如果你找不到更好的解决方案，你可以尝试在修改innerHTML之后将这行Post::paginate(1, ['*'], 'new-page-name');添加到ajax成功函数中。

在我调整Chrome浏览器大小之前，DOM元素不会加载（在Safari中完美运行）

2 个答案: