CODEWITHSUNDEEP
jqueryiframe
geotheory
geotheory

Reputation: 23650

Remove element in an iframe with jQuery

I'd like to remove an unnecessary header from a iframe webpage. Solutions in other SO pages on this don't seems to work. An example:

<!DOCTYPE html>
<html>
<head>
    <title>Modifying iFrame element</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.js"></script>
</head>
<body>
<p>Let's remove the header toolbar (class "header")</p>
<iframe id="wikipedia" src="https://en.m.wikipedia.org/wiki/Big_Ben" onload="removeHead()" style="width: 800; height: 500;"></iframe>

<script type="text/javascript">

function removeHead(){
    $(function(){
        var f=$('#wikipedia');
        f.load(function(){ 
             f.contents().find('.header').hide();
        });
    });
    console.log("script complete");
};

</script>>
</body>
</html>

The script runs but nothing happens. I've tried using remove() instead of hide(), and other combinations, with no luck. Grateful for assistance.

Upvotes: 1

Views: 3872

Answers (1)

Adam
Adam

Reputation: 9449

Due to browser security, content cannot generally be accessed using or manipulated from within an iframe unless it is on the same domain. This may not be the case with some older browsers, but definitely is now.

This is regulated by the Same-origin Policy.

Also see this article: http://www.dyn-web.com/tutorials/iframes/refs/iframe.php

Note: These cross-document interactions are only possible if the documents have the same origin.

Possible Solution 1

Use PHP Simple DOM Parser to get a specific div element, or certain portion of the page:

include("./dom/simple_html_dom.php");

$html = file_get_html("https://en.m.wikipedia.org/wiki/Big_Ben");
$content = $html->find("#content", 0);

echo $content->innertext;

Which will yield this: http://bibletools.info/script/wikipedia.php

Possible Solution 2

Use PHP Simple DOM Parser to simply remove the header. If you create a separate PHP page and load that php page into an iframe you'll not have conflicting styles etc.

include("./dom/simple_html_dom.php");

$html = file_get_html("https://en.m.wikipedia.org/wiki/Big_Ben");

$html->find('div.header', 0)->outertext = '';
$html->find('.top-bar', 0)->outertext = '';

echo $html;

Which will yield this: http://bibletools.info/script/wikipedia1.php

NOTE: This solution may be slightly slow, because the server must first load the page, then serve it to the user. However, practically it is quite efficient. I use this method all the time with great success.

Upvotes: 2

Related Questions