Question

嗨，谢谢你花时间为我看一下，好吧，这是我的问题。

我使用ebay api从ebay获取列表和订单并将它们存储在我的数据库中，我目前正在制作脚本来编辑我的列表的描述，我有一个标准的textarea从我的数据库获取描述，我还有一个名为preview的选项卡，它获取textarea的内容并使用jquery将其移动到iframe。

问题是ebay描述有一些javascript，当我使用jquery更新iframe时javascript在iframe中不起作用，如果我换出iframe为div并调整jquery来移动内容来自textarea到div它一切正常，但描述中的CSS正在弄乱网站设计，因此使用了iframe。

以下是说明中的一些代码，为了清晰起见缩短了

<div id="tabs" class="listingTabs">
    <a href="javascript:SwitchFrame(1)" class="tabs" title="tab 1" id="tab-01">tab 1</a>
    <a href="javascript:SwitchFrame(2)" class="tabs" title="tab 2" id="tab-02">tab 2</a>
    <a href="javascript:SwitchFrame(3)" class="tabs" title="tab 3" id="tab-03">tab 3</a>
    <a href="javascript:SwitchFrame(4)" class="tabs" title="tab 4" id="tab-04">tab 4</a>
</div>

<div class="tab-content" id="tc-01">
    <p>Content 1</p>
</div>

<div class="tab-content" id="tc-02" style="display: none;">
    <p>Content 2</p>
</div>

<div class="tab-content" id="tc-03" style="display: none;">
    <p>Content 3</p>
</div>

<div class="tab-content" id="tc-04" style="display: none;">
    <p>Content 4</p>
</div>

<script type="text/javascript">

function SwitchFrame(FrameID) {
    var FrameIndex = 1;
    for (FrameIndex=1;FrameIndex<=4;FrameIndex=FrameIndex+1)
        {
            if (FrameIndex != FrameID) {
                document.getElementById("tc-0" + FrameIndex).style.display="none";
                document.getElementById("tab-0" + FrameIndex).className="tabs";
            } else {
                document.getElementById("tc-0" + FrameIndex).style.display="block";
                document.getElementById("tab-0" + FrameIndex).className="tabs tab-selected";
            }
        }
    }

SwitchFrame(1);

</script>

我更新iframe的Jquery代码是

jQuery(document).ready(function(){

/**************************************************************************
******** Load the description into the iframe
**************************************************************************/

$('#DescriptionPreviewIframe').load(function(){     

    // get the EbayListings_Description content from the textarea
    var Description = $('textarea#EbayListings_Description').val();

    // parse the html (for javascript)
    var DescriptionParsed = $($.parseHTML($('textarea#EbayListings_Description').val(), document, true));

    // now update the DescriptionPreviewIframe div      
    $('#DescriptionPreviewIframe').contents().find('body').html(DescriptionParsed);

    }); // end DescriptionPreviewIframe load function

}); // end document ready function

当我刷新页面并查看控制台时，我收到错误“VM2767：11未捕获的TypeError：无法读取属性'样式'的nulll”并且对于出现错误的javascript行，它是“document.getElementById” （“tc-0”+ FrameIndex）.style.display =“block”;“这是我上面列出的代码。

此外，当我通过Chrome中的开发人员工具查看iframe的内容时，没有迹象表明javascript被移动了吗？所有的HTML都在那里，但没有javascript，但它仍然设法抛出错误，但是当我点击错误它显示我所有的JavaScript但它似乎是在一个不同的文件所有自己，这将解释为什么错误被扔了。

任何人都可以帮助解决为什么会发生这种情况，如果可能的话，还有解决方案。

亲切的问候

韦恩

Answer 1

我的第一个想法是这一行：

var DescriptionParsed = $($.parseHTML($('textarea#EbayListings_Description').val(), document, true));

应该是

var DescriptionParsed = $($.parseHTML($('textarea#EbayListings_Description').val(), $('#DescriptionPreviewIframe').get(0).contentDocument, true));

因为HTML应该在iframe的上下文中解析。但这似乎没有改变任何东西。也许我做错了，但似乎如果<script>由父代上下文中运行的代码解析，<script>本身就会在父代的上下文中运行。

另一种方法是定义调用iframe中解析的函数：

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
function loadMe(html)
{
    $('body').append($($.parseHTML(html, document, true)));
}
</script>

然后从主页面调用它：

jQuery(document).ready(function(){

/**************************************************************************
******** Load the description into the iframe
**************************************************************************/

$('#DescriptionPreviewIframe').load(function(){     

    // get the EbayListings_Description content from the textarea
    var Description = $('textarea#EbayListings_Description').val();

    this.contentWindow.loadMe(Description);

    }); // end DescriptionPreviewIframe load function

}); // end document ready function

使用jquery

1 个答案: