需要帮助定制警报,它可以在普通页面上阅读,但不能在WordPress中阅读

时间:2017-02-12 作者:Francisco F.

我制作了一个自定义的警报脚本,可以在常规html网站上运行,但不能在WordPress上运行(WordPress对喜欢什么和不喜欢什么都很挑剔)。这是我的代码:

    function CustomAlert(){
this.render = function(dialog){
    var winW = window.innerWidth;
    var winH = window.innerHeight;
    var dialogoverlay = document.getElementById(\'dialogoverlay\');
    var dialogbox = document.getElementById(\'dialogbox\');
    dialogoverlay.style.display = "block";
    dialogoverlay.style.height = winH+"px";
    dialogbox.style.left = (winW/2) - (550 * .5)+"px";
    dialogbox.style.top = "100px";
    dialogbox.style.display = "block";
    document.getElementById(\'dialogboxhead\').innerHTML = \'<a>test</a>\'
    document.getElementById(\'dialogboxbody\').innerHTML = dialog;
    document.getElementById(\'dialogboxfoot\').innerHTML = \'<div class="alertokbtn"><button onclick="Alert.ok()">OK</button></div>\';
}
this.ok = function(){
    document.getElementById(\'dialogbox\').style.display = "none";
    document.getElementById(\'dialogoverlay\').style.display = "none";
    window.location.innerHTML = dialog;
}
}
var Alert = new CustomAlert();
我用<button class="button" onClick="Alert.render(\'Alert test.\');" id="btn1">Get alert</button>. 我知道它正在做一些事情,因为当我按下按钮时,调试器中会出现错误。以下是我的错误,如果有帮助的话:

Uncaught TypeError: Cannot set property \'innerHTML\' of null
at CustomAlert.render (customalert.js:12)
at HTMLButtonElement.onclick ((index):76) 

Uncaught TypeError: Cannot read property \'style\' of null
at CustomAlert.render (customalert.js:7)
at HTMLButtonElement.onclick ((index):76)
谢谢:)

链接添加代码:

function CustomAlert(){
this.render = function(dialog, redirect){
var winW = window.innerWidth;
var winH = window.innerHeight;
var dialogoverlay = document.getElementById(\'dialogoverlay\');
var dialogbox = document.getElementById(\'dialogbox\');
dialogoverlay.style.display = "block";
dialogoverlay.style.height = winH+"px";
dialogbox.style.left = (winW/2) - (550 * .5)+"px";
dialogbox.style.top = "100px";
dialogbox.style.display = "block";

dialogbox.innerHTML = "<div id=\'dialogboxhead\'><a>Test</a></div>" +
    "<div id=\'dialogboxbody\'>" + dialog + "</div>" +
    "<div id=\'dialogboxfoot\'><div class=\'alertokbtn\'><button onclick=\'Alert.ok(" + redirect + ")\'>OK</button></div></div>";

}
this.ok = function(redirect2){
document.getElementById(\'dialogbox\').style.display = "none";
document.getElementById(\'dialogoverlay\').style.display = "none";

window.location = redirect2;
}
}
var Alert = new CustomAlert();

1 个回复
最合适的回答,由SO网友:Jorge Raigoza 整理而成

您在JavaScript上引用的某些元素似乎在执行代码时不存在。

Elements that should exist before the JavaScript:

<对话框覆盖(dialogoverlay)对话框(dialogbox)对话框头(dialogboxhead)对话框正文(DialogBoxBoxBody)

Based on the error message, these elements DO exist:

<对话框覆盖

A few questions to clarify

<您在执行JavaScript时是否检查了元素是否存在?(dialogboxhead、dialogboxbody、dialogboxfoot)
  • 这些元素是通过JavaScript创建的,还是直接添加到html页面<如果您直接添加它们,您是将它们添加到php页面还是通过WYSIWYG
  • First Test

    <打开Google Chrome加载网页(F12或Ctrl+Shift+I或菜单图标>更多工具>开发工具)
  • 这将带您进入包含加载HTML的元素选项卡,并在页面JavaScript中单击任何元素,然后按Ctrl+F打开搜索框
  • 检查搜索是否找到任何内容。如果没有,那就是问题所在
  • Second Test

    更换您的代码,看看会发生什么(我没有测试这段代码,只是试一试)

    function CustomAlert(){
    this.render = function(dialog){
        var winW = window.innerWidth;
        var winH = window.innerHeight;
        var dialogoverlay = document.getElementById(\'dialogoverlay\');
        var dialogbox = document.getElementById(\'dialogbox\');
        dialogoverlay.style.display = "block";
        dialogoverlay.style.height = winH+"px";
        dialogbox.style.left = (winW/2) - (550 * .5)+"px";
        dialogbox.style.top = "100px";
        dialogbox.style.display = "block";
        // ---> CODE CHANGES FROM HERE
        dialogbox.innerHTML = "<div id=\'dialogboxhead\' style=\'color:red; background-color: yellow;\'><a>Test 2</a></div>" +
            "<div id=\'dialogboxbody\' style=\'color:red; background-color: yellow;\'>" + dialog + "</div>" +
            "<div id=\'dialogboxfoot\' style=\'color:red; background-color: yellow;\'><div class=\'alertokbtn\'><button onclick=\'Alert.ok()\'>OK!!!!!!</button></div></div>";
        // <--- TO HERE
    }
    this.ok = function(){
        document.getElementById(\'dialogbox\').style.display = "none";
        document.getElementById(\'dialogoverlay\').style.display = "none";
        window.location.innerHTML = dialog;
    }
    }
    var Alert = new CustomAlert();
    

    相关推荐

    WP管理员缺少图标、大量的JavaScript错误,但仅当SCRIPT_DEBUG为FALSE时

    我可以访问一台Linux/Apache服务器,在那里我试图部署WordPress。为了避免这个错误,我用默认的2017主题和所有禁用的插件对其进行了测试。当我以管理员身份登录到任何wp admin页面时,左侧导航中的大多数图标都会丢失,选中的复选框没有任何复选框(例如),浏览器控制台会充满JavaScript错误。例如,在仪表板页面上,没有任何图标可见,错误控制台的内容如下:Uncaught TypeError: a.widget is not a function at load-scripts