Replace all hrefs in div with iframes

Question

I'm trying to read in a list of hrefs before the page loads or on the page load and convert all of the hrefs into iframes that point to the location that the href used to point to. For example:

Take this:

<div id="maincontent" >
<p> </p>
<a href="http://page1.html">page1.html</a><br />
<br />
<a href="http://page2.html">page1.html</a><br />
<br />
<a href="http://page3.html">page1.html</a><br />
<br />
</div>

And replace with:

<div id="maincontent" >
<iframe src="http://page1.html"></iframe>
<iframe src="http://page2.html"></iframe>
<iframe src="http://page3.html"></iframe>
</div>

I'd also like to be able to delete the br and p tags while I am at it. Can someone show me how to read in the content into jQuery and then rewrite it to the page in my new format? Many thanks for your expertise!

score 1 · Answer 1 · answered Mar 06 '14 at 22:14

1

Something like:

$("#maincontent a").each(function() {
    var src = this.href;
    $(this).replaceWith("<iframe src='" + src + "' />");
});

answered Mar 06 '14 at 22:14

tymeJV

103,943
14
161
157

you should use `this.getAttribute('href')` instead http://stackoverflow.com/questions/6977049/this-href-vs-this-attrhref – Roko C. Buljan Mar 06 '14 at 22:16

score 0 · Answer 2 · edited Feb 08 '17 at 14:51

0

$('#maincontent a').each(function(){

  var href= $(this).attr('href');
  var iframe = $('<iframe>', {src:href});
  $(this).replaceWith(iframe);

});

edited Feb 08 '17 at 14:51

Community

1
1

answered Mar 06 '14 at 22:16

Roko C. Buljan

196,159
39
305
313

score 0 · Accepted Answer · answered Mar 06 '14 at 22:29

0

You could First get the content into a variable.

E.g. var $maincontent = $('#maincontent');

Then use find to get all Elements Matching the "a" tag.

var $links = $maincontent.find("a");

Clean all Elements in existent div.

$maincontent.html("");

Then go through the links and create an iframe per a Tag.

$links.each(function(){
    var href = $(this).prop("href");
    var $iframe =  $("<iframe>").prop("src",href);
    $maincontent.append($iframe);
});

you can also create the html as String in the each to create the html and replace the original html. In the maincontent div.

answered Mar 06 '14 at 22:29

Scriptlabs

498
3
16

This is perfect, can you explain to me how you cleaned all elements in existent div? It is working perfectly, but I don't understand the back-end. Also can you explain where the closing tag is for the iframe? Many thanks! – user3139728 Mar 07 '14 at 13:35
Sry for late reply, the main idea is: use .find() to get only the tags from your maincontent. After that .html("") will insert an empty string to your main div. The function .each() will loop through all found links. Inside the loop $(this) references to a link. We get the property "href" and use it to create an empty iframe (closing tags will be inserted by jquery). We use prop() again to write the src property to the created iframe jquery element. At the end, the newly created jquery iframe element with src is "appended" to the empty maincontent div. – Scriptlabs Apr 19 '14 at 17:06

Replace all hrefs in div with iframes

3 Answers3