Shulou(Shulou.com)06/01 Report--

In this article, the editor introduces in detail "how to modify the content of the iframe page across domains". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to modify the content of the iframe page in the cross-domain" can help you solve your doubts.

Principle

The main site embeds the proxy page and passes the data to the proxy page. The proxy page operates the DOM of the target page according to the data of the main site. Because the proxy page is in the same domain as the target page, the proxy page can obtain and manipulate the document object of the target page.

prerequisite

The proxy.html needs to be placed under a service in the same domain as the embedded iframe page and can be accessed.

Use

Supports two kinds of calling methods: using postMessage and URL params.

PostMessage

This method requires the use of JSON.stringify to convert the object to a string.

/ / Reactfunction IframeProxy (props) {handleLoad = (e) = > {e.target.contentWindow.postMessage (JSON.stringify ({iframe: ``, includeStyle: `body {background-color: yellow;} header {display: none } footer {display: none;} `, includeScript: `window.addEventListener ('load', function () {alert (document.querySelector (' body') [xss_clean]);}) `, importStyle: `http://www.mydomain.com/assets/css/import.css`, importScript: `http://www.mydomain.com/assets/js/import.js`}), 'https://www.target.com');} return;}

URL params

This method needs to encode the transmitted content in encodeURIComponent.

/ / Reactfunction IframeProxy (props) {var params = 'iframe=' + encodeURIComponent (``); params + =' & includeStyle=' + encodeURIComponent (`body {background-color: red;} header {display: none;} footer {display: none;} `) Params + ='& includeScript=' + encodeURIComponent (`window.addEventListener ('load', function (event) {alert (document.querySelector (' body') [xss_clean]);}); `); params + ='& importStyle=' + encodeURIComponent (`http://www.mydomain.com/assets/css/import.css`) Params + ='& importScript=' + encodeURIComponent (`http://www.mydomain.com/assets/js/import.js `); return;}

API:

; params: {origin: the domain name of the current site, which is required when using postMessage. Proxy is used to verify the source domain name that sent the message. Iframe: need embedded iframe tag string, includeStyle: want to add css content to iframe page, includeScript: want to add js content to iframe page, importStyle: want to introduce css resource link to iframe page, if the target site uses security protocol (https), resource link uses non-security protocol (http), this function will be prohibited by browser. ImportScript: the js resource link that you want to introduce to the iframe page. If the target site uses security protocol (https) and the resource link uses non-security protocol (http), this function will be disabled by the browser.}

Note: due to security problems, includeScript and importScript are disabled by default. If you need to enable the variable ENABLED_JS_INCLUDE to true in proxy.html.

After reading this, the article "how to modify the content of iframe pages across domains" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.