Executing a href tag automatically coming from ajax success call

Question

I am trying to execute an href tag call in an iframe but I am facing some issues, it is not working:

My server page is returning me code like this:

<a href="http://www.mylink.com" target="iframe_a"></a>

Here is my success call back of ajax:

success: function(data){
    $('#contents').show().html("<iframe width='100%' height='90%' name='iframe_a'>" + eval(data) + "</iframe>");
}

But it does not work, I am not sure how to fix this, if any change is needed on the server part, I can change that, let me know thanks.

Issue #2:

After load I am using the following code to load the contents in a div:

$('#contents').show().html("<table border=0 cellspacing=0 cellpadding=0 id=hold_my_iframe><iframe width='100%' height='90%' name='iframe_a' src='" + data + "'></iframe></table>");

The above portion when I render my page in browser is coming like this:

<iframe width="100%" height="90%" src="//www.websitename.com " name="iframe_a">
complete page of the websitename.com inside
</iframe>
<table id="hold_my_iframe" cellspacing="0" cellpadding="0" border="0"></table>

The contents of the div box is like below:

<div style="display: block;overflow:auto;width:100%;height:auto;" class="tab default-tab" id="contents"></div>

I tried changing many things but first thing is it does not load the iframe in a table, I tried display: inline-block

another thing is my iframe has a scroller of its own page inside, so my parent page iframe scroller does not work, it always pointing to its children scrollbars, how can i make that a fix

Answer 1

Why don't you use the src attribute of the iframe like this:

success: function(data){
    $('#contents').show().html("<iframe width='100%' height='90%' name='iframe_a' src='" + data.href + "'></iframe>");
}

Of course if I got your question right and the data argument contains a link object otherwise it might require some additional operations to derive a value of the href attribute.

update 1: One of those additional operations was specified by @WisdmLabs

update 2: You should render the iframe inside a table cell otherwise it's an invalid structure and a browser is trying to fix this bug for you. Here's how your code should look like:

$('#contents').show().html("<table border=0 cellspacing=0 cellpadding=0 id=hold_my_iframe><tr><td><iframe width='100%' height='90%' name='iframe_a' src='" + data + "'></iframe></td></tr></table>");

According to your scrollbar question please provide an example using a http://jsfiddle.net service or similar one.

Answer 2

success: function(data){
    $('#contents').show().html("<iframe width='100%' height='90%' name='iframe_a' src='" + $.parseHTML( data ) + "'></iframe>");
}

Use this instead directly putting href in src attribute in iframe tag