CODEWITHSUNDEEP
javascriptjqueryiframe
Aerodynamika
Aerodynamika

Reputation: 8413

Highlight words on a page from an iframe embedded on that page

I'm trying to make it possible to highlight some words on the page where my iframe with a search field is embedded.

The idea is that a user enters the search terms inside the iframe and the iframe sends a command to highlight those words on the page where it's embedded.

I can find how to reload the page from the iframe - but how do I perform some actions on that page without reloading it - triggering those actions from the iframe?

Or should I embed the form using JavaScript to make it easier?

Thanks!

Upvotes: 1

Views: 656

Answers (1)

askemottelson
askemottelson

Reputation: 159

You are not allowed to do this because of same-origin policy. Instead load the contents of the iframe using JavaScript, or instead reload the iframe with the query given as a parameter to the URL.

iframe example:

// base url
var url = "http://myhomepage.com?q="

$("#button").click(function(){
    // get search keyword
    var key = $("#search").val();

    // get iframe reference and update its source
    var iframe = $("#iframe");
    iframe.attr('src',url+key);
});


<input type="text" id="search" />
<input type="button" id="button" value="go!"><br />
<iframe id="iframe" src="http://myhomepage.com" />

Upvotes: 1

Related Questions