Home > Developer > JavaScript
I encountered iframe related problems during the project. The business is very simple. In fact, when you operate a form inside the iframe, a function of the parent form is called. So I wrote two simple htm pages for testing. The popular methods on the Internet always report errors in Google browsers and fail.
The code for parent.html on the parent page is as follows:
Copy codeThe Code is as follows:
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head> <title>
</Title>
<Script src = "jquery-1.10.1.min.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
Function ParentFunction (){
Alert ('parentfunction ');
}
</Script> <Body>
<Input type = "button" id = "btnCancel" class = "button" value = "test"/>
<Iframe id = "FRMdetail" name = "FRMdetail" frameborder = "0" src1_'child.html 'style = "width: 100%; height: 100%;"> </iframe>
</Body>
</Html>
The child page child.html code is as follows:
Copy codeThe Code is as follows:
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head> <title>
</Title>
<Script src = "jquery-1.10.1.min.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("# BtnTest"). click (function (e ){
Var t = window. parent;
T. ParentFunction ();
});
})
</Script> <Body>
<Input type = "button" id = "btnTest" class = "button" value = "Expected value"/> rrr
</Body>
</Html>
The popular method var t = window. parent; t. ParentFunction () on the network can be called in IE, but the following error is always prompted in Google browser,
Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.
I have been searching for the Internet for a long time and cannot find a method. Some of them are earlier versions, which are basically useless. They are not tested. As a result, I found out that Google Chrome actually works in that way, but it is strange that it can be called in the file system only after it is released. The above error will occur.
In fact, there is also an html5 method postMessage, so it is rewritten according to, the final code is as follows:
The code for parent.html on the parent page is as follows:
Copy codeThe Code is as follows:
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head> <title>
</Title>
<Script src = "jquery-1.10.1.min.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
This. ParentFunction = function () {// It is the same as the commented-out method. That is to say, the addition of this is the same, because this here is windows
Alert ('parentfunction ');
}
// Function ParentFunction (){
// Alert ('parentfunction ');
//}
Function receiveMessage (e ){
Var data = e. data;
If (data = "ParentFunction ")
{
ParentFunction ();
}
}
If (typeof window. addEventListener! = 'Undefined') {// The postMessage that must be processed when html5 is used
Window. addEventListener ('message', receiveMessage, false );
} Else if (typeof window. attachEvent! = 'Undefined '){
Window. attachEvent ('onmessage', receiveMessage );
}
</Script> <Body>
<Input type = "button" id = "btnCancel" class = "button" value = "test"/>
<Iframe id = "FRMdetail" name = "FRMdetail" frameborder = "0" src1_'child.html 'style = "width: 100%; height: 100%;"> </iframe>
</Body>
</Html>
The child page child.html code is as follows:
Copy codeThe Code is as follows:
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head> <title>
</Title>
<Script src = "jquery-1.10.1.min.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("# BtnTest"). click (function (e ){
Var t = window. parent;
If (! T. ParentFunction) // use the postMessage method of html5.
{
T. postMessage ("ParentFunction ",'*');
}
Else
{
T. ParentFunction ();
}
});
})
</Script> <Body>
<Input type = "button" id = "btnTest" class = "button" value = "Expected value"/> rrr
</Body>
</Html>
After rewriting, although the error will occur in the file system, the method to be called is indeed called, and the purpose is indeed achieved, without affecting the use.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
