更改移动设备上内容的位置

Question

我在http://chasemccoy.net/ 运行一个站点，并在桌面上的侧边栏中投放广告。这来自广告网络中一些给定的 JS 代码。

在 iPhone 上查看时，该网站会加载自定义布局。当它显示在移动设备上时，我需要将该广告放在网站的页脚中。我正在使用媒体查询来更改移动布局。

我最初的解决方案是将 JS 添加到页脚，然后使用 display: none;在桌面版本上。但是，JS 不会两次加载到站点中。我基本上介绍了一种阻止 JS 在移动版本上加载的方法，直到它到达页脚代码。

有什么简单的解决方法吗？无论如何，我都不是 JS 奇才。感谢您的帮助。

编辑：这是广告的 JS：

<script async type="text/javascript" src="//cdn.yoggrt.com/yoggrt.js?zoneid=1353&serve=C6SD52Y&placement=chasemccoynet" id="_yoggrt_js"></script>

这只是粘贴到 HTML 中我希望它出现的位置。唯一的问题是浏览器不会加载多个代码实例。

编辑：这是侧边栏的大纲。

div id="sidebar">

  <div class="gravatar">
        <a href="http://chasemccoy.net/"><img alt src="avatar.png" class="avatar avatar-100 photo" height="100" width="100"></a>
      </div>

  <ul>
    <li><a href="http://chasemccoy.net/start-here">Start Here</a></li>
    <li><a href="http://chasemccoy.net/colophon">Colophon</a></li>
    <li><a href="http://chasemccoy.net/archive">Archive</a></li>
    <li><a href="http://chasemccoy.net/rss">RSS</a></li>
  </ul>

  <!-- Yoggrt.com Zone Code -->

  <script async type="text/javascript" src="//cdn.yoggrt.com/yoggrt.js?zoneid=1353&serve=C6SD52Y&placement=chasemccoynet" id="_yoggrt_js"></script>

  <!-- End Yoggrt.com Zone Code -->

</div> <!-- Sidebar -->

Answer 1

只需复制 HTML 代码。不是 JS 代码。并使用相同的显示：无；方法。

我的意思是两次使用 HTML 代码。但是不要重复使用JS代码。

Answer 2

你有几个选择。一种是动态创建脚本节点。在您的侧边栏中，您需要一个类似这样的脚本节点（未测试）：

if( ! navigator.userAgent.match(/iPhone/i)) {
     var aScripts = document.getElementsByTagName('script'),
         elContainer = aScripts[aScripts.length - 1].parentNode,
         elScript = document.createElement("script");

     elScript.type = "text/javascript";
     elScript.src = "http://chasemccoy.net/wp-content/themes/lessismoresidebar/js/retina-1.1.0.js"

     elContainer.appendChild(js);
}

更多here.