内联javascript通过Prototype JS Ajax.Request方法从AJAX响应中剥离 [英] Inline javascript is getting stripped off from the AJAX response by Prototype JS Ajax.Request method

问题描述

我正在一家Magento商店工作，试图在Prototype js框架的帮助下对小部件的javascript层进行编码.

I am working on a Magento store trying to code a widget's javascript layer with the help of Prototype js framework.

在我的grid.js文件中，AJAX调用的设置如下:

In my grid.js file AJAX call is setup like that:

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作为响应无法正常工作. 我什至在元素"标签(Chrome开发者工具)中都看不到该javascript代码段

The content for the div is getting updated correctly by the AJAX call but there is some inline JS in response which is not working. I can't even see that javascript snippet in Elements tab(chrome developer tool)

下面是在服务器端处理AJAX请求的代码:

Below is the code that handles the AJAX request on server side:

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处理程序的响应:

Below is the response that gets passed to onTabContentLoad AJAX handler:

 <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标签.到目前为止，这是我所能理解的.

You can see that the SCRIPT tags are there in the response. Its just when the content gets updated using Element.update function it strips off the SCRIPT tags. That's what I can understand so far.

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

NOTE: I have also used Ajax.Updater along with evalScripts:true and Ajax.Request along with evalJS:true.

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

Got stuck here. Any help would be much appreciated.

更新:

由于我正在使用 Element.update 函数刷新该部分.问题的根源是 prototype.js 中这行代码的这一部分. 2048.我可以看到它已在js调试器中执行.它会评估js代码，但还会从源代码中删除SCRIPT标签.注释掉 stripScripts 很好.

Since I am using Element.update function to refresh the section. The source of the problem is this part of the code in prototype.js around line no. 2048. I can see its getting executed in js debugger. It does evaluates the js code but also removes the SCRIPT tags from the source. Commenting out stripScripts works fine.

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

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

推荐答案

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

You are correct Element.update() remove script tag. you should use Element.innerHTML

这篇关于内联javascript通过Prototype JS Ajax.Request方法从AJAX响应中剥离的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！