javascript - 从父页面隐藏表单，直到加载特定的 iframe 元素 ID

Question

我只需要在 iframe 中加载特定元素 ID 时才显示父页面表单。父/iframe 在同一个域上。如何使用 javascript 实现这一点？

<form id="Search" action="../search.php" target="my-iframe" method="post">
<input type="text" id="location" name="keywords[all_words]"  />
<a href="#" onclick="document.getElementById('Search').submit()" >Search</a>
</form>

<iframe id="myiframe" src="../page.html" name="myiframe" width="100%" height="100%" scrolling="no" frameborder="0"></iframe>

Answer 1

你可以使用这样的东西：

// wait for the page to finish loading
window.onload = function(){

    // hide your form
    document.getElementById('Search').style.display = 'none';

    // get the document of the iframe
    var frameDocument = document.getElementById('myiframe').contentWindow.document;
    // if this is true the element with id 'test' is in the frame
    if(frameDocument.getElementById('test')){
        // show your form
        document.getElementById('Search').style.display = 'block';
    }
}

Answer 2

您可以使用 jQuery 将load事件附加到 iframe。这是一个工作示例：http: //jsfiddle.net/kPqbS/