【问题标题】:Javascript code is working when contained within html but not when loaded/injected separatelyJavascript 代码在包含在 html 中时有效,但在单独加载/注入时无效
【发布时间】:2012-03-09 19:24:42
【问题描述】:

我有以下代码,当嵌入到加载的 html 页面中时可以成功运行:

<HEAD>
<script language="javascript" type="text/javascript">
document.addEventListener('DOMContentLoaded', function () 
{
    document.documentElement.addEventListener("touchstart", function (e) 
    {
            if (['A', 'BUTTON'].indexOf(e.target.tagName) === -1)
            {
                e.preventDefault();
                e.stopPropagation();
                invokeObjectiveC("ontouchstart:");
            }
            else
            {
                e.preventDefault();
                e.stopPropagation();
                invokeObjectiveC(e.target);
            }
    }, true);
}, false);


function invokeObjectiveC(action) {
    ...
}

但是,如果我将其从 html 中取出并尝试单独加载,则它无法正常工作。 单独加载时是这样的:

alert('test');

function addListener()
{
    alert('adding listener');

    document.addEventListener('DOMContentLoaded', function () 
          {
          document.documentElement.addEventListener("touchstart", function (e) 
                        {
                        alert('touchstart');
                        if (['A', 'BUTTON'].indexOf(e.target.tagName) === -1)
                        {
                        e.preventDefault();
                        e.stopPropagation();
                        invokeObjectiveC("ontouchstart:");
                        }
                        else
                        {
                        e.preventDefault();
                        e.stopPropagation();
                        invokeObjectiveC(e.target);
                        }
                        }, true);
          }, false);


}

addListener();


function invokeObjectiveC(action) {
   ...
}

添加后,会显示“测试”和“添加侦听器”警报对话框,因此我知道这部分正在工作。 但是,该代码不起作用 - 它应该检测屏幕某些部分的触摸(这是在 iOS 上)。 使用 html 中的代码,一切正常,并且在触摸屏幕时执行,当它单独加载时,触摸屏幕时没有任何反应。 任何想法可能是什么问题?

====== 更新 我尝试在生命周期的各个阶段运行以下命令,包括在发出加载页面的请求之前,但从未出现“加载的 Dom 内容”:

var script = document.createElement('script');  
script.type = 'text/javascript';  
script.text = 
var Test =
{
f: function()
    {
        if (!event.originalTarget.defaultView.frameElement) 
        {
            alert('DOM content loaded');
        }
    }
}

function addTestListener()
{
    alert('adding listener');
    window.addEventListener("DOMContentLoaded", function(e) { Test.f(); }, false);
}



document.getElementsByTagName('head')[0].appendChild(script);

【问题讨论】:

  • 当您说“单独加载”时,您是什么意思?您是在 DOM 加载后手动加载它吗?如果是这样,那么DOMContentLoaded 事件可能已经触发,因此您的处理程序永远不会被调用。
  • 我正在使用一个名为 stringByEvaluatingJavaScriptFromString 的 iOS 函数来执行脚本。我试过在页面加载前后执行它。

标签: javascript html


【解决方案1】:

根据您对 iOS 功能的评论,我怀疑当您尝试执行 javascript 时文档已经加载。如果是这种情况,那么 DOMContentLoaded 事件已经发生,因此您的代码将永远不会被初始化。您可以通过将代码更改为以下内容来检查文档是否已加载来解决此问题:

function addListener() {
    alert('adding listener');

    function init() {
        document.documentElement.addEventListener("touchstart", function (e) {
            alert('touchstart');
            if (['A', 'BUTTON'].indexOf(e.target.tagName) === -1) {
                e.preventDefault();
                e.stopPropagation();
                invokeObjectiveC("ims-ontouchstart:");
            } else {
                e.preventDefault();
                e.stopPropagation();
                invokeObjectiveC(e.target);
            }
        }, true);
    }

    if (document.readyState === "complete") {
        init();
    } else {
        document.addEventListener('DOMContentLoaded', init, false);
    }
}

addListener();

function invokeObjectiveC(action) {
   ...
}

【讨论】:

  • 感谢您的回复。在包含页面和页面本身的视图的各个加载阶段有几个机会运行 javascript(提供了诸如 viewWillLoad、webViewDidAppear、webViewDidStartLoad 等回调)。我已经尝试了我的原始代码、您的代码以及我在上面的每个可能阶段添加的一些新代码作为更新,但没有运气。
  • @Woofbeans - 你能检查任何 javascript 错误吗?您是否能够在代码中设置断点并跟踪它以查看发生了什么?这可能是更高级的调试以实际查看正在发生的事情而不仅仅是尝试的情况。
  • 无法设置断点,我可以使用警报来显示相关信息吗?
  • @Woofbeans - 抱歉,我对您所处的 iOS 环境一无所知。google search 显示了一些可能性,包括 this one
【解决方案2】:

我换行了

函数 addListener()

进入

window.onload = function addListener()

它似乎成功了

【讨论】:

    猜你喜欢
    • 2017-12-29
    • 1970-01-01
    • 2014-06-07
    • 2013-01-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-04-19
    相关资源
    最近更新 更多