selim oruc selim oruc - 2 months ago 10
CSS Question

Iframe : How to display Type and ID

I am a beginner with JavaScript and trying to make an iframe.

The problem of my iframe is when I click on a link I want to show the id and the type in the iframe.

Can someone help me how to fix this problem ?

something like this

<script src="jquery-1.11.1.min.js"></script>
<script>
function SetIframe(Type, ID)
{
$("#DriveFrame").prop.('src')// i have no idea what to put after 'src' :(
}
</script>

<body>


<ul>
<li><a href="javascript:SetIframe('Medewerkers', '1000');" target="lijst">Medewerker 1000</a></li>
<li><a href="javascript:SetIframe('Medewerkers', '1001');" target="lijst">Medewerker 1001</a></li>
<li><a href="javascript:SetIframe('Medewerkers', '2001');" target="lijst">Medewerker 2001</a></li>
<li><a href="javascript:SetIframe('Kantoor', '101');" target="lijst">Kantoor 101</a></li>
</ul>
<hr>
<center>
<iframe name="lijst" id="DriveFrame" width="500" height="520"></iframe>
</center>

Answer

It's as easy as setting the src attribute of the iframe to a data:text/html URI (to inject html to iframe)

So the code is:

DriveFrame = $("#DriveFrame")[0];
DriveFrame.src="data:text/html,<h1>[Type="+Type+"]<br>ID="+ID+"";

Live fiddle here:

// https://jsfiddle.net/Lrynnuhm/3/

Explanation:

$("#DriveFrame")[0]; get the DOM element of the iframe (I mean, not JQuery, I hate using .prop() in the next step to change the URI)

Then, I inject HTML to iframe using data:text/html,<html code> (you can use DriveFrame.contentDocument.write(), but when you click another link, the text just goes under existing text.)