[已解决]js如何操作iframe

轩辕匡华 · 发表于 2017-6-11 07:38:53

目的:获取iframe中input的值123

打开 index.html

用js无法操作iframe，求助!

两个网页如下:
index.html

<html>
    <head>
        <title>我的百度</title>
    </head>
    <body>
        <div>
            <input type="button" value="百度" onclick="myFun()">
            <input type="button" id="kk" value="abc" onclick="abc()">
        </div>
        <div name="div2" src="abc.html">
            <iframe src="abc.html" name="fr2" id="ppp"></iframe>
        </div>
        <script>
            function myFun(){
                //var obj1 = parent.document.getElementById("ppp")
                var obj1 = document.frames[0].window.getElementById("kw")
                alert(typeof obj1)
        }

            function abc(){
                var obj2 = document.getElementById("kk")
                obj2.type="text"
            }
        </script>
    </body>
</html>

iframe中的网页如下
abc.html

<html>
    <head>
        <title>abc</title>
    </head>
    <body>
        <div>
            <input type="text" id="kw" value="123">
            <input type="button" id="a1" value="test" onclick="bu1()">
        </div>
        <script>
            function bu1(){
                alert("999")
        }
        </script>
    </body>
</html>

最佳答案

月排行榜 / 总排行榜

alltolove

2017-6-11 07:38:54

哎！操作这个很少有人用的，因为可以调用别人网页的资源，所以是只读的，我给你重写你的index.html的代码吧

<html>
    <head>
        <title>我的百度</title>
        <meta charset="utf-8">
    </head>
    <body>
        <div>
            <input type="button" value="百度" onclick="myFun()">
            <input type="button" id="kk" value="abc" onclick="abc()">
        </div>
        <div name="div2" src="abc.html">
            <iframe src="abc.html" name="fr2" id="ppp"></iframe>
        </div>
        <script>
            function myFun(){
                var obj1 = document.getElementById("ppp")
                obj1=obj1.contentWindow.document.getElementById('kw')
                alert(obj1.value)
        }

            function abc(){
                var obj2 = document.getElementById("kk")
                obj2.type="text"
            }
        </script>
    </body>
</html>

跳转到最佳答案楼层

alltolove · 发表于 2017-6-11 07:38:54

这个最佳答案由 alltolove 给出，感谢 alltolove 的回答。

单击隐藏图章

哎！操作这个很少有人用的，因为可以调用别人网页的资源，所以是只读的，我给你重写你的index.html的代码吧

<html>
    <head>
        <title>我的百度</title>
        <meta charset="utf-8">
    </head>
    <body>
        <div>
            <input type="button" value="百度" onclick="myFun()">
            <input type="button" id="kk" value="abc" onclick="abc()">
        </div>
        <div name="div2" src="abc.html">
            <iframe src="abc.html" name="fr2" id="ppp"></iframe>
        </div>
        <script>
            function myFun(){
                var obj1 = document.getElementById("ppp")
                obj1=obj1.contentWindow.document.getElementById('kw')
                alert(obj1.value)
        }

            function abc(){
                var obj2 = document.getElementById("kk")
                obj2.type="text"
            }
        </script>
    </body>
</html>

不二如是 · 发表于 2017-6-11 08:06:56

value是属性值，要用：

var para = document.getElementById("kw").getAttribute("value");

轩辕匡华 · 发表于 2017-6-11 12:03:31

不二如是发表于 2017-6-11 08:06
value是属性值，要用：

<html>
    <head>
        <title>我的百度</title>
    </head>
    <body>
        <div>
            <input type="button" value="百度" onclick="myFun()">
            <input type="button" id="kk" value="abc" onclick="abc()">
        </div>
        <div name="div2" src="abc.html">
            <iframe src="abc.html" name="fr2" id="ppp"></iframe>
        </div>
        <script>
            function myFun(){
                var para = document.getElementById("kw").getAttribute("value");
                alert(para)
        }

            function abc(){
                var obj2 = document.getElementById("kk")
                obj2.type="text"
            }
        </script>
    </body>
</html>

是这样吗？我试了几遍还是不行，浏览器是火狐和IE，都不行！再帮个忙，谢谢！

alltolove · 发表于 2017-6-11 12:53:53

你在主文件的head标签里加这么一行

<meta charset="utf-8">

轩辕匡华 · 发表于 2017-6-11 16:13:50

本帖最后由轩辕匡华于 2017-6-11 16:15 编辑

不好意思，可能是我太笨了，点击百度按钮还是一点反应也没有！

<html>
    <head>
        <meta charset="utf-8">
        <title>我的百度</title>
    </head>
    <body>
        <div>
            <input type="button" value="百度" onclick="myFun()">
            <input type="button" id="kk" value="abc" onclick="abc()">
        </div>
        <div name="div2" src="abc.html">
            <iframe src="abc.html" name="fr2" id="ppp"></iframe>
        </div>
        <script>
            function myFun(){
                //var obj1 = parent.document.getElementById("ppp")
                var para = document.getElementById("kw").getAttribute("value");
                alert(typeof para)
        }

            function abc(){
                var obj2 = document.getElementById("kk")
                obj2.type="text"
            }
        </script>
    </body>
</html>

不二如是 · 发表于 2017-6-11 16:37:30

轩辕匡华发表于 2017-6-11 16:13
不好意思，可能是我太笨了，点击百度按钮还是一点反应也没有！

这位可爱的鱼油，你的ID不对，怎么能找到DOM

var para = document.getElementById("kk").getAttribute("value");

轩辕匡华 · 发表于 2017-6-11 18:57:04

本帖最后由轩辕匡华于 2017-6-11 19:11 编辑

感谢大神！
因为开发网页是省局的，单位要获取数据又没办法直接申请数据库的用户名密码，只好出此下策了，非常感谢！

另外：
1，大神提到“调用别人的网页资源，所以是只读的",这个有什么影响吗？也就是说，我无法改变value的值？
我还想获取到节点后，可以批量提交数据的。不好意思，不敢用爬虫等方法，我们都有IP地址的，万一省局说我们干什么坏事，就惨了！只是想利用他们开发好的网站。
再次十二分的感谢！

账号		自动登录	找回密码
密码			立即注册