0

I have this structure, and i want to remove test2 class from div

iframe1 -> iframe2 -> <div class="test1 test2">.... </div>

I am able to access iframe2 but I am not able to find above div in second iframe.

here what I have tried

document.querySelectorAll('iframe').forEach(item => {
            var y = item.contentDocument.body.getElementsByTagName("iframe");
            setTimeout(() => {
                y[0].style.width = '100vw'; 
                $(y[0]).contents().find(".test2").removeClass('.test2')
            }, [500])
        })

y[0].style.width = '100vw';

this is working. but I am not able to find div with test2 class

console.log(y[0]) is iframe as expected.

enter image description here

y[0].contentDocument is null

if anyone can help me with this. Thanks in advance

Also in some answers I found that we can't change contents of iframe if it is of cross origin. but here I have same origin.

I just want some css changes either i need to remove test2 class or override it.

Abhi
  • 1,127
  • 1
  • 12
  • 25
  • I am using setTimeout because iframe2 is not loading instantly – Abhi Sep 27 '21 at 21:08
  • 1
    luckily we can't. the only possible case requires you to own the parent page and the iframe, in which case you must go through a message system. but in all cases direct access is prohibited. – Mister Jojo Sep 27 '21 at 21:17
  • You will want to use the correct syntax for `.removeClass()`, you have `'.test2'`. This is not correct. You want to use the Class Name, without the `.`. – Twisty Sep 27 '21 at 21:31
  • this is also not working. When I tried to do console.log($(y[0]).contents().find(".test)) I am getting this. ```S.fn.init [prevObject: S.fn.init(0)] length: 0 prevObject: S.fn.init(0) length: 0 prevObject: S.fn.init(1) 0: iframe ``` – Abhi Sep 27 '21 at 21:41
  • If I am reading this correctly, `iframe2` is nested inside `iframe1`, is that correct? If so, you must find and get the Contents of `iframe2` after you find and get the Contents of `iframe1`. Your script does not drill down far enough to find the proper content. – Twisty Sep 27 '21 at 21:55
  • if you understand the principle that you cannot edit a web page from another web page, you should understand that you cannot edit the content of an iframe, even from its parent page. – Mister Jojo Sep 27 '21 at 23:13

1 Answers1

0

Assuming a mock structure like the following, all with the same Origin:

index.html

<body>
  <iframe id="iframe1" src="index2.html"></iframe>
</body>

index2.html

<body>
  <iframe id="iframe2" src="index3.html"></iframe>
</body>

index3.html

<body>
  <div class="test2">Foo</div>
</body>

You would need the following confusing code.

var f1 = $("#iframe1");
var f2 = $("#iframe2", f1.contents());
var target = $(".test2", f2.contents());
target.removeClass("test2");

This is based on the following: Selecting an element in iframe with jQuery

Twisty
  • 30,304
  • 2
  • 26
  • 45
  • I tried above code, this is not removing class. may be it is due to having multiple classes on div like I mentioned in my question ```
    ```
     – Abhi Sep 28 '21 at 13:18
  • @Abhi no `.removeClass()` is not effected by that. Do you see any Errors in Console when you run the code? – Twisty Sep 28 '21 at 14:07
  • No errors. when I try to do console.log(target) I am getting something like this ```S.fn.init [prevObject: S.fn.init(0)]``` – Abhi Sep 28 '21 at 15:14
  • @Abhi please provide a Minimal, Reproducible Example: https://stackoverflow.com/help/minimal-reproducible-example – Twisty Sep 28 '21 at 17:13