Probleme mit domänenübergreifendem JavaScript

Der in diesem Artikel mit Ihnen geteilte Inhalt ist das domänenübergreifende Problem von JavaScript, das einen gewissen Referenzwert hat. Freunde in Not können sich darauf beziehen

1jsonp

Allgemeine Schnittstellen verwenden JSONP domänenübergreifend: Verwenden Sie den Ajax von JQuery, um den Datentyp als JSONP anzugeben.

$.ajax({
                async : true,
                url : "https://api.douban.com/v2/book/search",
                type : "GET",
                dataType : "jsonp", // 返回的数据类型，设置为JSONP方式
                jsonp : 'callback', //指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback
                jsonpCallback: 'handleResponse', //设置回调函数名
                data : {
                    q : "javascript",
                    count : 1
                },
                success: function(response, status, xhr){
                    console.log('状态为：' + status + ',状态是：' + xhr.statusText);
                    console.log(response);
                }
            });

Das Prinzip der domänenübergreifenden Unterstützung von JSONP: Das Prinzip von JSONP zur Implementierung domänenübergreifender Anforderungen besteht einfach darin, das verwenden, unterliegt nicht der Same-Origin-Richtlinie, um Daten domänenübergreifend abzurufen.

ist eigentlich die Implementierung des folgenden Codes: Das JS-Skript gibt Callback (Daten) zurück und eine Rückruffunktion ist auf der Seite definiert.

<script type="text/javascript">
    function handleResponse(response){
            console.log(response);
    }
</script>
<script type="text/javascript">
    window.onload = function() {

    var oBtn = document.getElementById(&#39;btn&#39;);

    oBtn.onclick = function() {     

        var script = document.createElement("script");
        script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse";
        document.body.insertBefore(script, document.body.firstChild);   
    };
};
</script>

2iframe + form ist kompatibel mit IE-Browser, iframe Der Körperinhalt sind die zu verwendenden Daten

<iframe name=&#39;hidden_frame&#39; id="hidden_frame" style=&#39;display:none&#39;></iframe>
        <form id="fileform" method="post" enctype="multipart/form-data" target="hidden_frame">
            <input type="file" name="fileUpload" />
        </form>
        <button id="submitbtn">开始上传</button>
        <script type="text/javascript">
            function callback(msg) {
                //回调函数
                alert(msg);
            }
        </script>
        <script type="text/javascript">
            $("#submitbtn").click(function() {
                var callbackurl = window.location.href.substring(0, window.location.href.lastIndexOf(&#39;/&#39;)) + "proxy.html"; //获取代理文件路径
                $("#fileform").attr("action", "FileHandler.ashx?callbackurl=" + callbackurl);
                $("#fileform").submit();
            })
        </script>

Bei der postMessage()-Methode von 3H5 ist die Kompatibilität nicht so gut

Einzelheiten finden Sie unter https://www.cnblogs .com/dolphinX/p/3464056.html

Laden Sie den Bildcode hoch. Die von der Schnittstelle zurückgegebenen Daten sind die Schreibmethode von postMessage

<form action=&#39;http://bird.sns.iqiyi.com/group_photo/upload&#39; method="post" target="imgFile"
    id="fileinfo" enctype="multipart/form-data">
      <input type="file" id="imgFile" accept="image/gif, image/png" class="hide" onchange="getPhotoSize(this)"
      />
      <input type="hidden" name="name" value="" />
      <input type="hidden" name="hobby" value="" />
    </form>
    <iframe

<script type="text/javascript">
    $(document).ready(function() {
      $(&#39;#upload&#39;).click(function() {
        $("#imgFile")[0].click();
      });
    });
    var queryToJson = function(url) {
      url = url.replace(/#.*/, "");
      var query = url.substr(url.lastIndexOf(&#39;?&#39;) + 1);
      var params = query.split(&#39;&&#39;);
      var result = {};
      for (var i = 0; i < params.length; i++) {
        var t = params[i].split("=");
        if (!t[0]) continue;
        result[decodeURIComponent(t[0])] = decodeURIComponent(t[1] || "");
      }
      return result;
    };
    $(&#39;[name=name]&#39;).val(queryToJson(window.location.href).name);
    $(&#39;[name=hobby]&#39;).val(queryToJson(window.location.href).hobby);
    //判断照片大小
    function getPhotoSize(obj) {
      photoExt = obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase(); 
      //只支持jpg,png
      if (photoExt != &#39;.jpg&#39; && photoExt != &#39;.png&#39;) {
        showMsg("请上传正确的图片格式，如JPEG、PNG");
        return false;
      }
      var fileSize = 0;
      fileSize = obj.files[0].size;
      fileSize = Math.round(fileSize / 1024); //单位为KB
      if (fileSize >= 10000) {
        showMsg("建议上传图片不超过10M");
        return false;
      }
      //跳转到过渡页，请求上传接口,将接口返回插入结果页src
      $(&#39;#page2&#39;).addClass(&#39;hide&#39;);
      $(&#39;#imgFile&#39;).addClass(&#39;hide&#39;);
      $(&#39;#fileinfo&#39;).submit();
      $(&#39;#loading&#39;).removeClass(&#39;hide&#39;);
      getMsg();
    }
    //获取返回数据
    function getMsg() {
      window.addEventListener(&#39;message&#39;,
      function(e) {
        $(&#39;#loading&#39;).addClass(&#39;hide&#39;);
        if (e.source != window.parent) return;
        if (e.data.code == &#39;A00000&#39;) {
          $(&#39;#imgSrc&#39;)[0].src = e.data.data.url;
          $(&#39;#msg&#39;).html(e.data.data.message);
          $(&#39;#page5&#39;).removeClass(&#39;hide&#39;);
        } else {
          location.href = &#39;/anotherTry.html&#39;;
        }
      },
      false);
    }
    //显示提示信息
    function showMsg(msg) {
      var _this = this;
      $(&#39;#msgTip&#39;).html(msg);
      $(&#39;#msgTip&#39;).removeClass(&#39;hide&#39;);
      window.setTimeout(function() {
        $(&#39;#msgTip&#39;).addClass(&#39;hide&#39;);
      },
      3000);
    }
    //再试一次
    function tryAgain() {
      $(&#39;#fileinfo&#39;).submit();
      $(&#39;#page5&#39;).addClass(&#39;hide&#39;);
      //看不到加载页面，页面闪
      $(&#39;#loading&#39;).removeClass(&#39;hide&#39;);
      getMsg();
    }
  </script>

Das obige ist der detaillierte Inhalt vonProbleme mit domänenübergreifendem JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!