Js control web pages open program code in a specific iframe

Source: Internet
Author: User

This article introduces a good js control page to open the program code in a specific iframe. If you need to know it, please do not go to the reference page.

When writing the system management backend, we often use iframe for management, but there is a problem that sometimes smart users will bypass our iframe parent page, the src content in iframe is directly opened. If this is the case, the system will be damaged. If this is the case, some functions of our system will not work properly, today, I wrote a control script in js, which allows users to directly open the content of the subpage without bypassing the iframe parent page, the control is implemented by adding a js script to the parent page of iframe.

Summary of the method for refreshing iframe in javascript. If the following iframe exists, the following N methods are used to refresh the iframe:

The Code is as follows: Copy code

<Iframe src = "1.htm" name =" ifrmname "id =" ifrmid "> </iframe>

Method 1: use the name attribute of iframe to locate

The Code is as follows: Copy code

<Input type = "button" name = "Button" value = "Button" onclick = "document. frames ('ifrmname'). location. reload ()">

Or

<Input type = "button" name = "Button" value = "Button" onclick = "document.all.ifrmname.doc ument. location. reload ()">

Instance

Parent page

The Code is as follows: Copy code

Function check_iframe (){
Var url = location. search; // includes? Parameters
If (url. indexOf ("? ")! =-1 ){
Var str = url. substr (1); // The transmitted url
Document. getElementById ("main"). src = decodeURI (str );
}
}

Note: 1. Use onload or similar event to load the function.
2. main indicates the iframe id of the Child page to be displayed on the parent page.
3. The uploaded url is encoded using encodeURI in get mode.
Subpage

The Code is as follows: Copy code

Function check_page (){
Var iframe_url = document. referrer. toLowerCase ();
If (iframe_url = ""){
Document. location. href = "default. aspx? "+ EncodeURI (document. location. href );
}
// Prevent an iframe from being opened again when you click the hyperlink on the subpage
Else if (iframe_url.indexOf ("default. aspx") =-1 & document. location. href. toLowerCase (). indexOf (iframe_url) =-1)
{Document. location. href = "default. aspx? "+ EncodeURI (document. location. href );}
}

Note: 1. Use onload or similar event to load the function.
2、supadmin.html indicates the parent page containing iframe displayed on the page.
3. Use encodeURI to encode the url of the Child page and send it to the parent page using get.

The same is true when you open your own window in frameset.

(1) code containing the framework page.

The Code is as follows: Copy code

<Frameset cols = "100, *" name = "frame1">
<Frame src = "1.htm" name =" top ">
<Frame src = "2.htm" name =" main ">
</Frameset>

The link code of (2) (1.htmor 2.htm:

The Code is as follows: Copy code

<A href = "http://www.bKjia. c0m" target = "top"> open the link in the above box </a>
<A href = "http://www.bKjia. c0m" target = "main"> open the link in the main Box </a>

Now let's talk about JS cross-origin under iframe.

Although the browser will prohibit js cross-origin access to objects on the page, there is no restriction on hierarchical link reference of iframe, that is, parent is still available; this solution uses the layer-2 embedded iframe and the page and parent in the level-2 iframe. parent pages are in the same domain name relationship, so as to avoid cross-domain issues and implement data transmission between two pages. In essence, parent is used. parent implements callback for js in the parent page!

Procedure:

The index.htm page of 12.16a.comcontains an iframe. src points to sub-index.html under B .com.
2. B .com domain name under the sub-index.htm page embedded with a hidden iframe, iframe src pointing to A.com domain name under the page pass.html? P = xx. After the js in the response page obtains the value of the p parameter, it directly calls parent.parent.doc ument. getElementById ("content"). value = p to complete dom value setting on the parent page;

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.