如何在Framework7的Ajax加载页面中运行广告脚本代码

解决Framework7 Ajax加载页面中广告代码执行的问题 #

Framework7的Ajax页面加载机制会异步渲染页面内容，直接嵌入的广告脚本（尤其是用了document.write的）往往无法正常执行——因为document.write在页面加载完成后调用会覆盖当前文档，而且动态插入的脚本也可能不会被自动解析。下面是我验证过的可行方案：

步骤1：改造页面中的广告容器

把你原来带脚本的广告代码替换成纯容器，这样Ajax加载页面时只会加载这个空容器：

<center id="ads"></center>

步骤2：利用Framework7页面钩子动态加载广告

Framework7提供了页面生命周期钩子，我们可以在page:init事件（页面DOM初始化完成后）中动态创建广告脚本并插入到容器里，这样能确保脚本在正确的时机执行。

全局监听方案（适用于所有带广告的页面）

在你的Framework7应用初始化代码中添加页面事件监听：

var app = new Framework7({
  // 你的应用配置项
  on: {
    pageInit: function(page) {
      // 查找当前页面的广告容器
      const adsContainer = page.$el.querySelector('#ads');
      if (!adsContainer) return; // 没有容器就跳过

      // 设置广告配置
      window.atOptions = {
        'key': '08d1ebd917b9392c0b306e455b220d4e',
        'format': 'iframe',
        'height': 50,
        'width': 320,
        'params': {}
      };

      // 动态创建广告脚本
      const adScript = document.createElement('script');
      adScript.type = 'text/javascript';
      // 补全广告脚本的URL（根据你原代码的逻辑拼接）
      adScript.src = `${location.protocol}//www.mahalo.com/ads/iframe.php?${new URLSearchParams(window.atOptions).toString()}`;
      
      // 将脚本插入到广告容器中
      adsContainer.appendChild(adScript);
    }
  }
});

单页面监听方案（只针对特定页面）

如果只有某个页面需要加载广告，可以在该页面的脚本中添加监听：

// 替换成你的页面名称
$$(document).on('page:init', '.page[data-name="target-page"]', function(e) {
  const page = e.detail.page;
  const adsContainer = page.$el.querySelector('#ads');
  if (!adsContainer) return;

  window.atOptions = {
    'key': '08d1ebd917b9392c0b306e455b220d4e',
    'format': 'iframe',
    'height': 50,
    'width': 320,
    'params': {}
  };

  const adScript = document.createElement('script');
  adScript.type = 'text/javascript';
  adScript.src = `${location.protocol}//www.mahalo.com/ads/iframe.php?${new URLSearchParams(window.atOptions).toString()}`;
  
  adsContainer.appendChild(adScript);
});

为什么这个方案有效？

1. 避开了document.write的问题：在Ajax加载的页面中，document.write会破坏现有页面结构，动态创建脚本标签是更安全的方式。
2. 利用Framework7的页面生命周期：page:init事件确保页面DOM已经完全渲染，此时插入脚本能保证广告容器存在，脚本可以正确执行。
3. 用URLSearchParams拼接参数：比手动拼接字符串更规范，避免参数转义问题。

内容的提问来源于stack exchange，提问作者James Kowalski