六）iframe 及父子页面之间获取元素、方法调用

最新推荐文章于 2024-07-12 09:36:48 发布

weixin_30662011

最新推荐文章于 2024-07-12 09:36:48 发布

阅读量55

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zno2/p/4867942.html

版权

http://www.w3school.com.cn/tags/tag_iframe.asp

father.html

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
    function ff(msg) {
        alert(msg);
    }

    function test() {
        // 只能通过iframe名称获取子页面，不能通过id  
        var div = window.frames["b"].document.getElementById("div");
        alert(div);
    }
    function test2() {
        // 调用子页面方法  
        window.frames["b"].ff("hi san");
    }
</script>
</head>
<body>
    <span id="span">FFFFFFFFF</span>
    <iframe id="a" name="b" width="200px" height="200px" src="san.html">
        <p>您的浏览器不支持 iframe 标签。</p>
    </iframe>
    <span>HHHHHHHH</span>
    <br>
    <a href="#" onclick="test()">点击获取子页面元素</a>
    <br>
    <a href="#" onclick="test2()">点击调用子页面方法</a>
</body>
</html>

san.html

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
    function test() {
        // 调用父页面方法 
        window.parent.ff("hello");
    }
    function test2() {
        var span = window.parent.document.getElementById("span");
        alert(span);
    }
    function ff(msg) {
        alert(msg);
    }
</script>
</head>
<body>
    <div id="div"
        style="width: 100px; height: 100px; background-color: yellow"></div>
    <a href="#" onclick="test()">点击调用父页面方法</a>
    <br>
    <a href="#" onclick="test2()">点击获取父页面元素</a>
    <br>
</body>
</html>

补充：

jQuery选择元素用：

jQuery(expression, [context])

返回值:jQuery

$("#someSelector",parent.document);
$("#someSelector",document.frames['someIframeName'].document);

效果图：

转载于:https://www.cnblogs.com/zno2/p/4867942.html

weixin_30662011

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
六）iframe 及父子页面之间获取元素、方法调用

http://www.w3school.com.cn/tags/tag_iframe.aspfather.html<!DOCTYPE html><html><head><script type="text/javascript"> function ff(msg) { alert(msg); ...
复制链接

扫一扫