Document. Domain + iframe case analysis of PHP Ajax cross subdomain solution

Time:2021-5-3

This article describes the solution of PHP Ajax cross subdomain: document. Domain + iframe. The details are as follows:

For the same primary domain and different subdomains, we can set the same document. Domain to cheat the browser to achieve the effect of cross subdomain.

For example, we have two domain names: www.a.com And img.a.com

stay www.a.com The following is a.html

There are img.json and img.html files under img.a.com.

Img.json is the data we want to get


[
  {
    "name" : "img1",
    "url" : "https://imgs.developpaper.com/imgs/img1.jpg"
  },
  {
    "name" : "img2",
    "url" : "https://imgs.developpaper.com/imgs/img2.jpg"
  }
]

Img.html is what we iframe will refer to:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Insert title here</title>
</head>
<body>
<script src="./jquery.js"></script>
<script type="text/javascript">
  document.domain = "a.com";

  var p = parent.window.$;
  P ("#sub"). Text ("I was added by a sub page");
</script>
</body>
</html>

a. Html is a page to get data across subdomains

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Insert title here</title>
</head>
<body>
<!--  Get data across domains and add it to UL -- >
<ul></ul>

<!--  The child page accesses the parent page through parent.window -- >
<div></div>

<!--  Reference img.html under img.a.com through iframe -- >
<iframe src="http://img.a.com/img.html"></iframe>

<script src="./jquery.js"></script>
<script type="text/javascript">
document.domain = "a.com";

$("#iframe").bind("load", function() {
  //Get the jQuery object of the subpage
  iframe = document.getElementById("iframe").contentWindow.$;

  iframe.getJSON("http://img.a.com/img.json", function(data) {
    var con = "";
    //Note that the $object here is www.a.com On
    $.each(data, function(i, v) {
      con += "<li>" + v.name + ":" + v.url + "</li>";
    });
    $("#data").html(con);
  });
});
</script>
</body>
</html>

a. In HTML, we get the jQuery object of the sub page through contentwindow. $, then get the data through getjson, and get the data through www.a.com The $object on writes data to UL.

In the child page img.html, we access the $object of the parent page through the parent.window, and operate the element to add data.

More information about PHP can be found in the following topics: PHP + Ajax skills and application summary, PHP network programming skills summary, PHP string usage summary, PHP + MySQL database operation introductory course and PHP common database operation skills summary

I hope this article is helpful for PHP programming.

Recommended Today

Large scale distributed storage system: Principle Analysis and architecture practice.pdf

Focus on “Java back end technology stack” Reply to “interview” for full interview information Distributed storage system, which stores data in multiple independent devices. Traditional network storage system uses centralized storage server to store all data. Storage server becomes the bottleneck of system performance and the focus of reliability and security, which can not meet […]