$("element").remove(); in iframe using jquery

Question

Here's an example i m trying to run to delete a div element with class "location_description" in iframe but it doesnt work. Any solution?

HTML

<div id="kk">
    <iframe id = "weatherFrame" src="https://www.meteoblue.com/el/%CE%BA%CE%B1%CE%B9%CF%81%CF%8C%CF%82/widget/daily?geoloc=detect&days=4&tempunit=CELSIUS&windunit=KILOMETER_PER_HOUR&coloured=coloured&pictoicon=1&maxtemperature=1&mintemperature=1&layout=light"  frameborder="0" scrolling="NO" allowtransparency="true" sandbox="allow-same-origin allow-scripts allow-popups" class = "weatherFrame" style = "width: 60%;height: 100%;"></iframe>
    <div> 
        <a href="https://www.meteoblue.com/el/%CE%BA%CE%B1%CE%B9%CF%81%CF%8C%CF%82/%CF%80%CF%81%CF%8C%CE%B3%CE%BD%CF%89%CF%83%CE%B7/%CE%B5%CE%B2%CE%B4%CE%BF%CE%BC%CE%AC%CE%B4%CE%B1?utm_source=weather_widget&utm_medium=linkus&utm_content=daily&utm_campaign=Weather%2BWidget" target="_blank"></a>
    </div>      
</div>

jQuery (end of <body>)

$('#weatherFrame').load(function(){
    alert("in");
    $("location_description").remove();
});

Is the iframe content and the main page on the same domain? – Matteo Tassinari Dec 06 '16 at 16:50 — Matteo Tassinari, Dec 06 '16 at 16:50
where is`location_description` ? – Mahi Dec 06 '16 at 16:52 — Mahi, Dec 06 '16 at 16:52

score 3 · Answer 1 · answered Dec 06 '16 at 16:52

If the domain of the iframe is not the same as the domain of the parent page, you will not be able to manipulate its content due to the same origin policy

If they're different domains but you have control over its content (that is, you can add code to it), you can use Postmessaging to do what you are trying to do. Simply add a listener within the iframe's content which tells it when to fire off this change.

From looking at the domain however I imagine this is not your page so there isn't much you can do

score 0 · Answer 2 · edited Jun 30 '20 at 05:30

0

Using jquery if you want to remove something by it's class then this will be your statement to do that :

$(".location_description").remove();

And in an iframe, you cannot do such manipulation. You can so some thing as below

     iframe.contentWindow.postMessage('Hello ');

edited Jun 30 '20 at 05:30

Akash Ranjan

922
12
24

answered Dec 06 '16 at 17:01

Nikunj Sardhara

638
1
5
20

$("element").remove(); in iframe using jquery

2 Answers2