Detailed explanation of how to find elements in iframe using jquery

This time I will bring you jquery a detailed explanation of the method of finding elements in iframe, what are the precautions for jquery to find elements in iframe, the following is a practical case, let's take a look.

Question:

Today in the company, I added a "whether to display" picture title function to ckeditor

Difficulty:

The plug-in has a lot of content and very powerful functions. It is impossible to read and understand the logical relationships inside in a short time, and the modified content cannot destroy the internal logical relationships of the plug-in, and cannot introduce more by adding one function. problem, so we can only solve this problem locally

Breakthrough:

Use iframeframeWhen you know the html inserted into the page, the page has some The initialization function is completed here, so add this checkbox component here, and then find the window object you want to process based on the last window - window.parent.document .body

jQuery(expression, [context]) - If the context parameter is specified, such as a set of DOM elements or a jQuery object, it will be searched in this context.

The following example is to add components to the parent window of an iframe

Copy code The code is as follows:

$( 'tr.cke_dialog_ui_hbox', parent.document.body).prepend('Photo title description is brought into the diary

You cannot access dynamically added components in the closure, because the content in the closure has already been run when the page is loaded, but the component with ID kkkk has not been added to the page. Use The value obtained by $("#kkkk") will be empty, which cannot achieve the expected purpose. Abnormal phenomena will occur and a script error will be reported in the browser.

How to judge whether jquery finds a match that matches The object of the condition?

if(0==$(".check_show_img_title", parent.document.body).length){
   alert("没有查找到对象");
}else{
  alert("有"+$(".check_show_img_title", parent.document.body).length+"组件符合查询条件");
}

Experience:

After dynamically adding components to the page, the normal initialization state will be restored by refreshing the page, but if it is partial Refresh may add multiple components, but if you only need one component, you will delete the dynamically added component when you leave the page. This will cause a problem. It may not be deleted in different browsers, which will be very complicated. Depressed, there is a problem of browser compatibility. Since this is the case, you can change your way of thinking and add it in a certain state (adding attributes to the tag), otherwise it will not be added, so that you do not have to delete the components you added. Okay, another way to solve the browser compatibility problem

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Detailed explanation of the steps to obtain the document object in iframe

How to deal with page anchor failure in iframe

The above is the detailed content of Detailed explanation of how to find elements in iframe using jquery. For more information, please follow other related articles on the PHP Chinese website!