� ��_ 2019-06-13 15:55 采纳率: 0%
浏览 575

【小白前端】如何提取iframe里的文本内容(PS:存在跨域)?

自己写的html然后里边有一个iframe引入地址是百度网的话,我想从百度网获取一点文本的话,能够实现吗,应该怎么做?

同一个域名下的话,是可以实现的,但是这个不同,就遇到问题了,用jquery的话,获取不到内容;用test()就会报错。

他的报错

_Uncaught DOMException: Blocked a frame with origin "http://127.0.0.99"from accessing a cross-origin frame.
_

HTML代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <style>
      div.dd  {
          width: 500px;
          height:500px;
      }
    iframe {
      width: 100%;
      height: 500px;
      background-color: rgba(0,0,0,0.1);
    }
  </style>
</head>
<body>
<div class="input">
  内容:<input type="text" id="input" value="111">
  <button class="btn btn-success" xonclick="test()">获取</button>
  <iframe id="iframea" name="iframe1" src="https://www.baidu.com/" frameborder="0">

  </iframe>
</div>
</body>
  <script>

    $(function() {
        $('.btn').click(function() {
            // var $text = $("#iframea").contents().find(".mnav").text;//jquery 方法1  
            // var $text = $("#iframea").contents().find("#ccc").text;
            // alert($text)
            // $('#input').val($text);
            var word = $("#iframea").contents().find('#u1').text();
            console.log(word)
            alert(word);
        })


    })

    function test() {
        // var a = document.getElementById("iframea").contentWindow.document.getElementById("u1").value;
        // var word = document.getElementById("iframea").contentWindow.document.getElementById("u1")

        // alert(word)
    }

  </script>

</html>

小生在此谢过各位看官和大神!!!
br
br
br
兜兜转转,问题还是没有完全解决,但相对于上周,有多知道了一点东西。
知道了如何用jsonp跨域获取数据;可是,最重要的一步是如何将百度网转换成jsonp形式呢?要把他转换成jsonp形式,才可以抓取。

首先是 http://127.0.0.1/za_soft/aaaa.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

    <!-- <script src="https://www.baidu.com/"></script> -->

    <script type="text/javascript">

        $.ajax({
            type: "get",
            async: false,
            url: "http://127.0.0.1:8800/zzzzz.js",
            dataType: "jsonp",
            jsonp: "callBack", // 传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般认为:callback)
            jsonpCallback: 'flightHandler', // 自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写“?”,jQuery会自动为你处理数据
            success: function(json) {
                alert('您查询到航班信息:票价:' + json.price + '$, 余票:' + json.tickets + '张。' + '航班:' + json.code);
                console.log($(this).html);

            },
            error: function() {
                alert('失败!!!!');
            }
        })

    </script>
</head>
<body>
        内容:<input type="text" id="input" value="111">
        <button class="btn btn-success" onclick="test()">获取</button>
        <iframe id="iframea" name="iframe1" src="https://www.baidu.com/" frameborder="0">

        </iframe>
</body>
</html>

下边是http://127.0.0.1:8800/zzzzz.js


flightHandler({
    "code": "CA1998",
    "price": 1780,
    "tickets": 5
});

我最终的目的是想要将

ajax里面的 url: "http://127.0.0.1:8800/zzzzz.js",
地址换成 url: "https://www.baidu.com/",
所以问题来了, 怎么样把百度网转换成一个jsonp形式的文件呢?
求教求教啊。。。。。。

  • 写回答

1条回答 默认 最新

  • 「已注销」 2019-06-17 09:47
    关注

    可以用dom.contentWindow.document获取iframe的根节点
    dom为iframe元素

    评论

报告相同问题?

悬赏问题

  • ¥15 oracle集群安装出bug
  • ¥15 关于#python#的问题:自动化测试
  • ¥20 问题请教!vue项目关于Nginx配置nonce安全策略的问题
  • ¥15 教务系统账号被盗号如何追溯设备
  • ¥20 delta降尺度方法,未来数据怎么降尺度
  • ¥15 c# 使用NPOI快速将datatable数据导入excel中指定sheet,要求快速高效
  • ¥15 再不同版本的系统上,TCP传输速度不一致
  • ¥15 高德地图点聚合中Marker的位置无法实时更新
  • ¥15 DIFY API Endpoint 问题。
  • ¥20 sub地址DHCP问题