Script标签解决跨域

关于跨域,首先我们来讲一下基础知识。
–什么是跨域请求:从一个域下去访问另一个域下的脚本(js/php)或者文档结构(html)。
–为什么跨域:因为我们往往需要其他域下的数据,另一个因为同源策略的限制,不进行跨域无法直接请求另一个域的数据。
–怎么样进行跨域请求:img、a、form、link、iframe可以跨域,但是没有返回值,所以不进行使用,最主要使用的是script标签。然后,通过jsonp进行跨域请求,所使用的核心是通过script标签去请求另一个域下的数据,利用的是script的加载文件以及执行代码的特性。另一端的服务器需要接受script标签所传递的数据,并执行回调函数。
跨域的特征:协议/端口号/域名,这三者有一个不一样的,就可以称之为跨域。
接下来,我们使用script来写一个小例子,实现一下跨域。

//先上后台数据吧
<?php
    $newsList = array();
    $newsList[0] = array("title"=>"新闻1");
    $newsList[1] = array("title"=>"新闻2");
    $newsList[2] = array("title"=>"新闻3");
    //json_encode,将数组转变成json串
    $jsonStr = json_encode($newsList);
    echo $_GET['callback']."(".$jsonStr.")";
?>

稍微解释一下,就是在后台存了一组数据,然后通过前台传来的函数名,调用函数,并把json当做参数传入函数内

//HTML代码
<script type="text/javascript">
        var ul = document.getElementsByTagName("ul")[0];
        function createNewsList(jsonstr){
            for(var i = 0;i<jsonstr.length;i++){
                var tit = jsonstr[i].title;
                var lis = document.createElement("li");
                ul.appendChild(lis);
                lis.innerHTML = tit;
            }
        }
    </script>
    <script src="http://127.0.0.1/PHPCourse2/PHP/Lesson19---jsonchuan.php?callback=createNewsList"></script>

重要的一点是,大家要知道,在PHP中,字符串也是有长度,并且可以像获取数组那样去获取的。
然后就是,用script去跨域的时候,方法为get,因为需要传的数据,是需要拼接在script的src后面的。
嗯~感觉其他的就没啥好说的了~~~

### 如何使用 `iframe` 标签解决问题 当遇到不同源之间的通信障碍时,可以利用HTML5中的`postMessage` API来实现在父页面和子`iframe`间的双向安全通信。此API提供了一种机制,在不违反同源策略的情况下发送消息给其他窗口或框架。 #### 利用 `postMessage` 进行父子帧间通讯 为了使两个来自不同源的网页能够互相交流,可以在加载于`iframe`内的子页面调用其上级容器(即宿主页)上的JavaScript函数,并附带必要的参数作为消息的一部分。同样地,宿主页也可以向嵌入式的`iframe`发送指令或数据。这种交互方式依赖于事件监听器以及对特定事件处理器的定义[^1]。 下面是一个简单的例子展示如何设置这样的通信: ##### 子页面 (位于 https://child.example.com) ```javascript // 向父级页面发送一条消息 window.parent.postMessage('Hello Parent!', 'https://parent.example.com'); ``` ##### 父页面 (位于 https://parent.example.com) ```html <iframe id="myIframe" src="https://child.example.com"></iframe> <script type="text/javascript"> const myIframe = document.getElementById('myIframe'); function receiveMessage(event) { // 验证来源地址以确保安全性 if (event.origin !== "https://child.example.com") return; console.log(`Received message: ${event.data}`); // 对收到的消息作出响应 event.source.postMessage('Hi Child, I got your message.', event.origin); } window.addEventListener("message", receiveMessage, false); </script> ``` 这种方法不仅解决限制带来的挑战,而且提供了良好的灵活性和支持多种类型的互动场景。值得注意的是,虽然存在其他的解决方案如JSONP或是CORS头配置等,但对于涉及UI组件集成的情况而言,基于`iframe`加`postMessage`的方式通常是更为直观的选择之一[^3]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值