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

Question

您好，感谢您花时间帮我查看此内容，好吧，这就是我的问题。

我使用 ebay api 从 eBay 获取列表和订单并将它们存储在我的数据库中，我目前正在编写脚本来编辑列表的描述，并且我有一个标准文本区域，可以从我的数据库获取描述，我还有一个名为“预览”的选项卡，它获取文本区域的内容并使用 jquery 将其移动到 iframe。

问题是 eBay 描述有一些 javascript，当我使用 jquery 更新 iframe 时，如果我将 iframe 换成 div 并调整 jquery 将内容从 iframe 中移动，则 javascript 在 iframe 中不起作用。 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));

因为 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