搜索
织梦建站

织梦漂浮广告浏览器兼容问题怎么解决？

99ANYc3cd6
99ANYc3cd6 / / 0 评论 / 5 阅读
作者有点忙，还没来得及写简介......
预计阅读时长 25 分钟
位置： 首页 › 织梦建站 › 正文

“漂浮广告”通常指的是在网页上浮动的一个小窗口，它会跟随用户滚动或固定在某个位置，在织梦系统中,这个功能通常是通过调用一个JavaScript文件来实现的。

织梦漂浮广告浏览器兼容
（图片来源网络，侵删）

兼容性问题的主要原因

织梦默认的漂浮广告脚本（通常位于 /templets/default/js/drag.js 或类似路径）主要存在以下几个方面的兼容性问题：

  1. 获取页面高度和宽度的API差异：

    • 旧版脚本可能使用已被废弃的 document.body.scrollHeight 和 document.body.scrollWidth。
    • 更准确的方法是使用 document.documentElement.scrollHeight 和 document.documentElement.scrollWidth。
    • 在 Quirks Mode（怪异模式）下，document.body 的行为和 document.documentElement 是不同的,这会导致定位错误。

  2. 获取滚动条位置的API差异：

    • 获取页面滚动条的垂直位置，旧版脚本可能使用 document.body.scrollTop。
    • 在标准模式下，应该使用 document.documentElement.scrollTop。
    • 为了兼容所有浏览器（包括IE6/7/8）,需要同时检查这两个属性。

  3. window.event 对象：

    织梦漂浮广告浏览器兼容
    （图片来源网络，侵删）
    • 在IE浏览器中，事件对象会作为 window.event 全局变量存在。
    • 在标准浏览器（如Firefox, Chrome, Safari）中,事件对象是作为函数的第一个参数传递的。
    • 旧版织梦脚本可能只处理了 window.event，导致在非IE浏览器中无法获取鼠标位置,从而无法拖动。

  4. CSS样式问题：

    • position: fixed：这个属性可以让元素相对于浏览器窗口固定定位，但在IE6中，position: fixed 不被支持，需要用 position: absolute 配合 expression 来模拟,这会严重影响性能。
    • z-index：层级问题，如果页面中有其他元素（如视频、Flash、下拉菜单）的 z-index 比漂浮广告高,可能会覆盖住广告。
    • margin 和 padding：不同浏览器对盒模型的解析不同,可能导致广告元素出现意外的偏移。

  5. JavaScript事件绑定方式：

    • 旧版脚本可能使用 element.onmousedown = function() {...} 的方式绑定事件，这种方式可以，但使用 addEventListener（标准浏览器）和 attachEvent（IE）是更现代和灵活的方式,也更容易管理。

解决方案与代码优化

针对以上问题，我们可以对织梦的漂浮广告脚本进行优化,创建一个更兼容的版本。

以下是一个经过优化的、兼容性更好的漂浮广告脚本示例，你可以用它来替换掉你原来的 drag.js 文件。

织梦漂浮广告浏览器兼容
（图片来源网络，侵删）

优化后的 drag.js 代码：

// 漂浮广告拖动效果 - 兼容多浏览器
function FloatAd(id) {
    var obj = document.getElementById(id);
    var floatAdBox = obj; // 漂浮广告的容器
    var isDragging = false; // 是否正在拖动
    var startX, startY; // 鼠标按下的初始位置
    var originalLeft, originalTop; // 元素原始位置
    // 防止拖动时选中文本
    function preventSelect(e) {
        if (isDragging) {
            window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
        }
    }
    // 鼠标按下事件
    function mousedown(e) {
        isDragging = true;
        // 获取鼠标初始位置 (兼容IE和其他浏览器)
        e = e || window.event;
        startX = e.clientX;
        startY = e.clientY;
        // 获取元素原始位置 (相对于父容器)
        originalLeft = floatAdBox.offsetLeft;
        originalTop = floatAdBox.offsetTop;
        // 添加事件监听
        document.addEventListener('mousemove', mousemove, false);
        document.addEventListener('mouseup', mouseup, false);
        document.addEventListener('selectstart', preventSelect, false);
        // 阻止默认行为，防止拖动图片等
        e.preventDefault && e.preventDefault();
        return false;
    }
    // 鼠标移动事件
    function mousemove(e) {
        if (!isDragging) return;
        e = e || window.event;
        // 计算元素新位置
        var newX = originalLeft + (e.clientX - startX);
        var newY = originalTop + (e.clientY - startY);
        // 限制在可视窗口内 (可选)
        // var maxX = document.documentElement.clientWidth - floatAdBox.offsetWidth;
        // var maxY = document.documentElement.clientHeight - floatAdBox.offsetHeight;
        // newX = Math.max(0, Math.min(newX, maxX));
        // newY = Math.max(0, Math.min(newY, maxY));
        // 应用新位置
        floatAdBox.style.left = newX + 'px';
        floatAdBox.style.top = newY + 'px';
    }
    // 鼠标释放事件
    function mouseup() {
        isDragging = false;
        // 移除事件监听
        document.removeEventListener('mousemove', mousemove, false);
        document.removeEventListener('mouseup', mouseup, false);
        document.removeEventListener('selectstart', preventSelect, false);
    }
    // 初始化，绑定事件
    floatAdBox.addEventListener('mousedown', mousedown, false);
    // 为IE8及以下浏览器添加兼容性处理
    if (floatAdBox.attachEvent) {
        floatAdBox.attachEvent('onmousedown', function() { mousedown(window.event); });
    }
}
// 页面加载完成后执行
window.onload = function() {
    // 'your-float-ad-id' 替换成你漂浮广告容器的ID
    FloatAd('your-float-ad-id'); 
};

如何使用这个优化后的脚本：

  1. 替换文件：将你网站 templets/你的模板目录/js/ 下的 drag.js 文件内容替换为上面的代码。

  2. 修改HTML：

    • 在你的漂浮广告的HTML代码中，确保最外层容器有一个唯一的 id。
    • 示例：
      <div id="your-float-ad-id" style="position: absolute; width: 100px; height: 100px; right: 10px; top: 50px; cursor: move; z-index: 9999;">
    <a href="http://www.your-link.com" target="_blank">
        <img src="/images/your-ad.png" alt="广告" />
    </a>
    <span id="close-float-ad" style="position: absolute; top: -5px; right: -5px; cursor: pointer; color: red; font-weight: bold;">X</span>
</div>
    • 关键点：
      • position: absolute;：这是拖动的基础。
      • cursor: move;：鼠标放上去时显示移动光标,提升用户体验。
      • z-index: 9999;：设置一个足够高的层级,确保广告在最上层。
      • 注意：不要使用 position: fixed;，因为我们的拖动逻辑是基于绝对定位的，如果你希望广告初始位置是固定的，可以通过CSS设置,但拖动后会变成绝对定位。

  3. 关闭功能：上面的HTML示例中加了一个关闭按钮,你需要为这个按钮添加点击事件来隐藏广告。

    <script type="text/javascript">
document.getElementById('close-float-ad').onclick = function() {
    document.getElementById('your-float-ad-id').style.display = 'none';
};
</script>

    这段代码可以放在你的模板文件中，或者放在 drag.js 文件的 window.onload 函数里。

针对IE6的特殊处理

如果你的网站还需要兼容IE6，你需要额外处理 position: fixed 的问题，由于我们上面的方案是基于 position: absolute 拖动的，所以大部分情况已经可以工作，但如果你的广告需要“固定”在视口（不随页面滚动）,那么就需要对IE6做特殊处理。

你可以使用一个叫做 cssFixed 的技巧，通过 expression 来动态计算位置。

CSS示例 (仅针对IE6):

/* 在你的CSS文件中添加 */
* html #your-float-ad-id {
    position: absolute;
    top: expression(eval(document.documentElement.scrollTop + 50)); /* 50是距离顶部的像素 */
    right: 10px;
}

说明：

  • * html 是一个只有IE6及以下版本才能识别的Hack。
  • expression 会执行其中的JavaScript代码来动态计算样式值。这种方法会严重影响页面性能，应尽量避免使用。
  • 在我们的拖动逻辑中，一旦用户开始拖动，广告就会脱离 expression 的控制，变成正常的绝对定位，这种方法只适用于“固定但不允许拖动”的场景。

最佳实践与建议

  1. 优先考虑用户体验：漂浮广告很容易引起用户反感，确保广告尺寸合理，不要遮挡重要内容,并提供明显的关闭按钮。

  2. 使用现代库：如果项目复杂，可以考虑使用成熟的JavaScript库来实现拖动功能，如 jQuery UI Draggable，它能更好地处理各种兼容性问题,并提供更多配置选项。

    • 使用jQuery Draggable的示例：

      <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<div id="your-float-ad-id">
    <a href="http://www.your-link.com" target="_blank">
        <img src="/images/your-ad.png" alt="广告" />
    </a>
    <span id="close-float-ad" style="cursor: pointer;">X</span>
</div>
<script>
$(document).ready(function() {
    $("#your-float-ad-id").draggable();
    $("#close-float-ad").click(function() {
        $("#your-float-ad-id").hide();
    });
});
</script>

  3. 测试是关键：在修改代码后，务必在主流浏览器（Chrome, Firefox, Edge, Safari）以及需要兼容的旧版浏览器（如IE11, IE10）中进行充分测试。

通过以上优化和调整,你的织梦漂浮广告应该能够在绝大多数现代浏览器和旧版浏览器中正常工作了。

-- 展开阅读全文 --
头像
dede自定义表单如何加入验证码？
« 上一篇 01-11
dede5.7验证码不正确怎么办？
下一篇 » 01-11

相关文章

取消
微信二维码
支付宝二维码

目录[+]