How to solve the problem of two iframes calling each other jquery and js functions on the same page

I haven’t updated my blog this month. Alas, I’m lazy again. Today I solved a problem about two iframes calling each other jquery function methods.

There are two iframes in a.html, as follows ：

<iframe width="100%" height="100%" name="left" scrolling="auto" frameborder="0" src="b.html" id="left"></iframe>
<iframe width="100%" height="100%" name="main1" scrolling="auto" frameborder="0" src="c.html" id="main1" ></iframe>

b.html There is a treeview in it, which is called the left menu iframe

c.html is the data displayed after clicking on the treeview in b.html, which is called the right page iframe.

Since there is a relationship between the two pages, which exists in a.html, the two pages can call each other's Js methods.

ps: If there is no relationship between the two pages, then let them have a relationship before they can call each other. For example, if both pages reference a js file, then they can call each other.

For example, there is a button in

c.html

<input type="button" id="btn" onclick="btnAlert(i)"/>
<input type="hidden" id="hidVal" name="hidVal" />
function btnAlert(index) {
 $(window.parent.$("#left"))[0].contentWindow.GetIndex(index);//调用b.html中的方法
}

b.html

function GetIndex(index) { 
　　$(window.parent.$("#main1")).contents().find("#hidVal").val(index);//找到c.html中的hidVal给他赋值
}

Finally summarize:

If If the iframe of c.html is in b.html, then reference the following method

1, and call the parent class function method in the child iframe:

window.parent.func();

2, get the elements of the parent interface in the child Iframe:

$("#xx", window.parent.document);

This xx is what you want to get in the parent interface The ID of the element.

3, jquery calls the js method in the sub-iframe page:

iframefunction() is the method of the sub-page

$(window.parent.document).contents() .find("#iframename")[0].contentWindow.iframefunction();

The above is the entire content of this article. I hope that the content of this article can bring some help to everyone's study or work, and at the same time I hope you will support PHP Chinese website!

For more related articles on how to solve the problem of two iframes calling each other jquery and js functions on the same page, please pay attention to the PHP Chinese website!