1

I've been reading up a lot on how to perform changes to the HTML as soon as it's rendered.

Let's say we should replace the SRC from all iframes on a page. If I do this in document_end, the original SRC first loads, then when the .js loads, it blinks.

I want the iframes to load with my SRC at the beginning, it will much more smooth.

I've been looking at webRequests, but can't get it to work: http://developer.chrome.com/extensions/webRequest

How can I make something like this to work "before" the code so it "replaces" the HTML that will be printed?

if ($('iframe').length){
    $('iframe').each(function( index ) {
        $(this).attr('src', 'http://www.google.com');
    }); 
}
Jozo
  • 121
  • 3
  • 12
  • Are you talking about printing? As in @media print? In the title you say print, in the body you say render. You might want to edit your question to be consistent. – sowbug Feb 27 '14 at 00:50

2 Answers2

1

Try Mutation Observers. I'm not sure if they trigger on iframes, but they technically should since the DOM is being manipulated.

Ignat
  • 1,142
  • 1
  • 12
  • 22
0

TL;DR version: You can't modify iframes at all, but you can render a modified site in a div.

Okay, so you can't modify an iframe at all, but you can render a site in a div. It's a really hacky solution, but it gets the job done (I won't be posting a solution in code, but instead tell you how to do it)

To begin with, replace your iframe element with a div. This div will contain the modified site.

You'll then need to get the contents of Google's site. Because JavaScript can be temperamental at times with permissions, I'll suggest two solutions to get the content of a site.

  1. Use PHP to get the contents of a site. It's even easier to modify it in PHP too! Then you can just make an AJAX request to the PHP file and get the modified content.

  2. Using JavaScript solely, you can get the content of an URL using AJAX. Check out this topic

Now, since you want to modify some HTML, you'll have to do a recursive search throughout the content for any tags, and then replace them. Bear in mind that if you sloppily search through it, you'll end up with a half-working filter.

I'm assuming Google references files locally, e.g logo.png, rather than http://www.google.com/logo.png. This means that when it is finally rendered, you'll end up with broken file references everywhere and a site that looks nothing like google. To fix this, search through the content with a filter only for file references and URLs. Check if the URL is logo, you can do this by checking if the URL contains http:// or https://. If it doesn't contain this, add http://www.google.com as a prefix to the URL. This should cause all references to be fixed.

Finally, to render the content, just add it to the "iframe" div. You should give the div a width and height to make it seem more like an iframe.

I hoped this helped ;)

Community
  • 1
  • 1
Riftes
  • 36
  • 3