Prototype JS Ajax.Request 方法从 AJAX 响应中剥离了内联 javascript

Question

我正在开发一个 Magento 商店，试图在 Prototype js 框架的帮助下编写小部件的 javascript 层。

在我的 grid.js 文件中，AJAX 调用是这样设置的：

loadTabContent: function(tab, tabType){

        if(tab === undefined || tabType === undefined){
            return this;
        }

        entityId = tab.id.split('-')[3];

        request = new Ajax.Request(
            this.tabContentLoadUrl,
            {
                method:'get', 
                onSuccess: this.onTabContentLoad.bind(tab),
                onFailure: this.ajaxFailure.bind(this),
                evalJS: true,
                parameters: {
                    id: entityId, 
                    type: tabType
                }
            }
        );
    }

以下是成功处理程序：

onTabContentLoad: function(transport){

        if(transport && typeof transport.responseText !== undefined){
            try{
                response = transport.responseText;
            }catch (e) {
                console.log('PARSE ERROR', e);
                response = {};
            }

            entityId = this.id.split('-')[3];
            tabType = this.id.split('-')[1];

            if(response && $('tab-' + tabType + '-' + entityId + '-contents')){
                $('tab-' + tabType + '-' + entityId + '-contents').update(response);    
            }
        }
    },

AJAX 调用正确更新了 div 的内容，但响应中的一些内联 JS 无法正常工作。 我什至看不到元素选项卡中的 javascript sn-p（chrome 开发人员工具）

以下是在服务器端处理 AJAX 请求的代码：

public function renderTabContentAction()
    {
        $entityId = Mage::app()->getRequest()->getParam('id');
        if( ! $entityId){

            $this->getResponse()->setHeader('HTTP/1.0', '400', true);
            $this->getResponse()->setBody('Invalid parameters provided.');
        }

        $tabType = Mage::app()->getRequest()->getParam('type');
        if( ! $tabType){

            $this->getResponse()->setHeader('HTTP/1.0', '400', true);
            $this->getResponse()->setBody('Invalid parameters provided.');
        }

        Mage::register('current_entity_id', $entityId);
        Mage::register('current_tab_type', $tabType);

        $tabHtml = $this->_getTabsHtml($entityId, $tabType);    


        $this->getResponse()->setHeader('HTTP/1.0', '200', true);
        $this->getResponse()->setBody($tabHtml);
    }

以下是传递给 onTabContentLoad AJAX 处理程序的响应：

 <div class="vertical-tabs">
      <div class="tabs">
        <div class="tab" id="tab-vertical-137-2441">
          <input type="radio" id="label-vertical-product-tab-137-2441" name="product-tab-group-137">
          <label class="tabs-label" for="label-vertical-product-tab-137-2441">PG-10ml</label>
          <div class="content" id="tab-vertical-137-2441-contents">
          </div>
        </div>
        <div class="tab" id="tab-vertical-137-2442">
          <input type="radio" id="label-vertical-product-tab-137-2442" name="product-tab-group-137">
          <label class="tabs-label" for="label-vertical-product-tab-137-2442">PG-15ml</label>
          <div class="content" id="tab-vertical-137-2442-contents">
          </div>
        </div>

      </div>
    </div>
   <script type="text/javascript">
     bulkOrderGrid.initVerticalTabs();
     bulkOrderGrid.activateTab('2441', 'VERTICAL');
   </script>

您可以在响应中看到 SCRIPT 标记。就在使用 Element.update 函数更新内容时，它会剥离 SCRIPT 标签。这就是我目前能理解的。

注意： 我还使用了 Ajax.Updater 以及 evalScripts:true 和 Ajax.Request 以及 evalJS:true。

卡在这里。任何帮助将不胜感激。

更新：

由于我使用 Element.update 函数来刷新该部分。问题的根源是 prototype.js 中的这部分代码，围绕第 1 行。 2048. 我可以看到它在 js 调试器中被执行。它会评估 js 代码，但也会从源代码中删除 SCRIPT 标记。注释掉 stripScripts 效果很好。

   else {
     element.innerHTML = content.stripScripts();
   }

   content.evalScripts.bind(content).defer();

Answer 1

我认为你的问题是 Ajax 响应是通过 String#evalScripts() 传递的，但上下文不是全局上下文，所以不是你的脚本块，而是这样做

<script type="text/javascript">
 window.bulkOrderGrid.initVerticalTabs();
 window.bulkOrderGrid.activateTab('2441', 'VERTICAL');
</script>

如果这不能解决问题 - 您可以直接运行 transport.responseText.evalScripts()，但您仍然需要在脚本块中使用 window. 来解析变量的范围。

Answer 2

你是正确的 Element.update() 删除脚本标签。你应该使用 Element.innerHTML