使用 jquery 更新 iframe 时，iframe 中的 javascript 不起作用

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 Uncaught TypeError: Cannot read property 'style' of 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));

因为应该在 iframe 的上下文中解析 HTML。但这似乎并没有改变任何东西。也许我做错了什么，但似乎如果<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