Record the problem in the iframe encountered by the back-end personnel developing the front-end
Reprinted blog: https://www.cnblogs.com/Capricorn-HCL/articles/4216302.html
jquery操作iframe:https://www.jb51.net/article/123314.htm
iframe child page and parent page element access and js variable access
1. The child page accesses the parent page element
parent.document.getElementById('id')和document相关的方法都可以这样用
2. The parent page accesses the child page elements
document.getElementById('iframeId').contentDocument.getElementsByTagName('table'); contentDocument后可以使用document相关方法
var tet = document.getElementById('iframeId').contentWindow.document.getElementById("text_inputId"); alert(tet.value);
3. The child page accesses the parent page js variable (Note: the js variable of the parent page needs to be a global variable)
子页面var variable = parent.variableParent (variableParent为父页面定义的变量)
4. The parent page accesses the child page js variable
这部分目前的解决方案是在父页面设置全局变量，在子页面进行修改后将子页面的变量赋值给父页面 5. The child page accesses the parent page js method
window.parent.paramMethod();6, the parent page access to the child page js method
document.getElementById('iframeId').contentWindow.iframeMethod(param);
The page inside the iframe calls the parent window, and the js function method of the left and right windows
implements the method that the page inside the iframe directly calls the custom function of the parent window to which the iframe belongs.
For example, there is a window A, there is an IFRAME B in A, and the C page is loaded in B. At this time, C should directly call a custom function AFUN() in A;
then just write the following JS function in the C page. : Window.parent.AFUN
();
If AFUN() has parameters, you can also pass appropriate parameters directly.
For example:
modify the property of the parent window control
window.parent.document.getElementById('frmright').src=window.parent.document.getElementById('frmrightsrc').value;
call the parent window function
window.parent.POPUP('bigFram' );
The parent window calls the iframe child window method
<iframe name="myFrame" src="child.html"></iframe>
myFrame.window.functionName(); The
iframe child window calls the parent window method
parent.functionName();
Use js to call each other's js function in the iframe page.
An html page is divided into two parts, the left is the navigation bar, and the right is the content that needs to be displayed. The code is as follows:
The code in the left column is:
<IFRAME frameBorder=0 id=frmTitleLeft name= framLeft src="left.html" style="HEIGHT: 100%; width:180px;">
Connect to left.html. For
example, there is a function right() in the right column, I want to call right() in the link in the left column Function, how to implement it
1. First, the leftframe is embedded in the container page index.html, so you need to return to the index level first, and get the rightframe object
var frames=window.parent.window.document.getElementById(" frameid");
2. To be able to execute the functions in the page, you must obtain the window object. Here is an important object, contentWindow. Once you obtain this object, you can execute the functions in it, such as
frames.contentWindow.right();
The above code is compatible with IE6, Firefox3, and chrome2.0, all successfully passed the test. I haven't tried IE7, but it should be no problem.
3. For example:
window.parent.document.getElementById('leftFrame').contentWindow.JSMenu('MenuUl'+Sid);
window.parent.frames["leftFrame"].JSMenu('MenuUl'+Sid);
There is the following one, which has not been tested
It is not as usual iframeName.test();-test() is a method in iframe. Because I want to write a more general thing, I get the id of the iframe dynamically from a configuration file. Then call the method inside. But it was unsuccessful. Xiangfan help take a look. The code is as follows:
<iframe id="iframe1"></iframe>
var cs = document.all;
for(var i = 0; i <cs.length; i++) {
if(cs.tagName.toUpperCase() == " IFRAME") {
if(cs.id == "iframe1") {
alert(frmDealData);
alert(cs);
document.frames.iframe1.setScreenletStatus(iframeLayoutLvl);
document.frames.cs.setScreenletStatus(iframeLayoutLvl);
}
}
} The
first call is successful.
But the second sentence was not successful.
If you can only get the cs object, how to call the method in the iframe? Thank you
------------------------------------
Don't use id, use name
window.frames[cs].fun ()
Multi-window operation
Since web pages can use iframeelements to embed other web pages, multiple windows are formed in a web page. If another web page is embedded in the child window, a multi-level window will be formed.
Window reference
The script in each window can refer to other windows. The browser provides some special variables to return to other windows.
top: The top-level window, that is, the top-level windowparent:Parent windowself: The current window, which is itself
The following code can determine whether the current window is the top-level window.
if (window.top === window.self) {
// 当前窗口是顶层窗口
} else {
// 当前窗口是子窗口
}
The following code rewinds the visit history of the parent window once.
window.parent.history.back();
Corresponding to these variables, the browser also provides some special window names for reference by window.open()methods, <a>tags, and <form>tags.
_top: Top-level window_parent:Parent window_blank: New window
The following code means to open the link in the top-level window.
<a href="somepage.html" target="_top">Link</a>
iframe element
For an iframeembedded window, the document.getElementByIdmethod can get the DOM node of the window, and then use the contentWindowattribute to get iframethe windowobject contained in the node .
var frame = document.getElementById('theFrame');
var frameWindow = frame.contentWindow;
In the above code, frame.contentWindowyou can get the windowobject of the child window . Then, if the homology restriction is met, the attributes inside the child window can be read.
// 获取子窗口的标题
frameWindow.title
<iframe>The contentDocumentattributes of the element can be obtained from the documentobject of the child window .
var frame = document.getElementById('theFrame');
var frameDoc = frame.contentDocument;
// 等同于
var frameDoc = frame.contentWindow.document;
<iframe>The elements comply with the same-origin policy. Only when the parent window and the child window are in the same domain, can the two communicate with scripts, otherwise, only the window.postMessagemethod is used.
<iframe>Inside the window, use a window.parentreference to the parent window. If the current page does not have a parent window, the window.parentproperty returns itself. Therefore, you can determine whether the current window is a window by window.parentwhether it is equal to .window.selfiframe
if (window.parent !== window.self) {
// 当前窗口是子窗口
}
<iframe>The window windowobject has an frameElementattribute that returns <iframe>the DOM node in the parent window. For non-embedded windows, this property is equal to null.
var f1Element = document.getElementById('f1');
var f1Window = f1Element.contentWindow;
f1Window.frameElement === f1Element // true
window.frameElement === null // true
window.frames property
window.framesThe property returns an array-like object, and the members are the objects of all child windows window. You can use this attribute to achieve mutual reference between windows. For example, frames[0]return to the first child window, frames[1].frames[2]return to the third child window inside the second child window, and parent.frames[1]return to the second child window of the parent window.
Note that window.framesthe value of each member is the window within the frame (ie, the windowobject of the frame ), not iframethe DOM node labeled in the parent window. If you want to get the DOM tree inside each frame, you need to use window.frames[0].documentthe wording.
In addition, if the <iframe>element has an nameor idattribute set , the attribute value will automatically become a global variable, and window.framesthe windowobject of the child window can be returned through attribute reference .
// HTML 代码为 <iframe id="myFrame">
window.myFrame // [HTMLIFrameElement]
frames.myframe === myFrame // true
Further, the namevalue of the property will automatically become the name of the child window can be used in the window.openmethod of the second parameter, or <a>and <frame>label targetattributes.