Develop Reference

Provide link to iframe via js

I have an iframe with src but I want to provide the link to src via javascript on click of the button. How do I pass the value?
EDIT: The webpage refreshes everytime I click on the button. It displays the webpage and then refreshes it to display again. How to avoid this?
<button type="button" onclick = "Open()">Click Me!</button>
<iframe id="iframe"
src="" //Provide link here
style="
z-index: 10;
display: None;
">
</iframe>
<script>
function Open() {
let myIframe = document.getElementById("iframe");
myIframe.style.display = 'block';
iframe.src = "www.mylink.com"
}
</script>

you're not referencing myIframe when setting src in the example, you need to do myIframe.src = 'https://www.mylink.com'

How do I force any iframe content to appear on top if changed, without changing the attributes in the links?

How do I force any iframe content to appear on top if the content is changed as if the link had the target="_top" attribute...
EXAMPLE 1: Normally this code is what would be applied in a page.
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script type="text/javascript">
if(top!=self){
top.location.replace(document.location);
alert("For security reasons, framing is not allowed; click OK to remove the frames.")
}
</script>
But I need to aply it to the iframe instead, and fire it only if the iframe is changed. How do I do that?
For example, I click on a link within the iframe, once that page changes URL then the iframe puts the page on target="_top" without having attributes for it in the iframe URL page, but the attributes for it should be from the iframe page itself.
EXAMPLE 2:
I have found a code that works as it should, the problem is only that it only fires when clicked on a button. Can I somehow make it to fire automatically when content of the iframe changes?
JavaScript:
<script type="text/javascript">
//<![CDATA[
$(window).load(function(){
document.getElementById('example-button').addEventListener('click', function (ev) {
ev.preventDefault();
var win = open('about:blank');
var iframe = document.getElementById('example-iframe');
setTimeout(function () {
var body = win.document.body;
body.style.padding = 0;
body.style.margin = 0;
body.appendChild(iframe);
iframe.style.position = 'fixed';
iframe.style.padding = 0;
iframe.style.margin = 0;
iframe.style.width = '100%';
iframe.style.height = '100%';
iframe.style.border = 0;
}, 100);
win.addEventListener('beforeunload', function () {
document.getElementById('example-container').appendChild(iframe);
iframe.style.position = '';
iframe.style.padding = '';
iframe.style.margin = '';
iframe.style.width = '';
iframe.style.height = '';
iframe.style.border = '';
});
});
});
//]]>
</script>
HTML:
<button id="example-button">open in new window</button>
<div id="example-container">
<iframe id="example-iframe" src="https://example.com/">
</iframe>
</div>

After fiddling and putting together with loads of ideas given online by others I came up with a solution that is 70% correct.
Now the only thing that remains is how to make it react ONLY when the iframe URL changes and not when loading like now.
JavaScript:
<script language="JavaScript">
function GoToURL()
{
var URLis;
URLis = document.URLframe.u.value
{
var location= (URLis);
window.open(location, '_blank');
}
}
</script>
HTML:
<form name="URLframe" id="URLframe" method="post">
<iframe id="test" src="https://example.com" onload="GoToURL(this);"></iframe>
<input type="hidden" name="u" size="71" value="" placeholder=" URL " id="SeekBox" onkeypress="handleKeyPress(event)">
<script type="text/javascript">
(function() {
document.getElementById('SeekBox').value = document.getElementById('test').src;
})();
</script>
</form>
To test it easier I used these codes at the bottom instead:
<iframe id="test" src="https://www.4shared.com/privacy.jsp" onload="loadurl();" width="100%" height="528px"></iframe>
<input type="text" name="u" size="71" value="" placeholder=" URL " id="SeekBox">
<input type="button" id="SeekButton" onclick="GoToURL(this);" value=" go ">
<input type="button" id="SeekButton" onclick="loadurl();" value=" load url ">
<input type="button" id="SeekButton" onclick="alerturl();" value=" alert url ">
<script type="text/javascript">
function alerturl() {
alert($('iframe').attr('src'));
}
</script>
<script type="text/javascript">
function loadurl() {
document.getElementById('SeekBox').value = document.getElementById('test').src;
}
</script>

If I understand you correctly then you want to get the src of the iframe any time there is a change within the iframe and then open a window with that src. If I'm right then it doesn't seem like it's possible. I tried to get the source of the iframe using this little bit of code but to no avail.
<iframe id="test" src="justanotherwebsite.com" onLoad="iframeLoad()"></iframe>
<script>
var counter = 0;
function iframeLoad(){
if (counter > 0){
console.log($('#test').attr('src'));
}
counter ++;
}
</script>
Let me know if I'm way off the mark on this and I'll have another look.

How can I remove the extra iframe space at the bottom?

This is my first question on stackoverflow. What I want to do is to create an iframe into test div with javascript and add html code in it. Also I want to resize iframe's height dynamically. The code below works good for me only if I set dynamic_div's height more than 150px. If the height of the dynamic_div less than 150 it automatically sets iframe's height to 150. How can I fix this problem ?
P.S : html code in the html variable is dynamic. So I can not change anything in it.
Many Thanks.
<html>
<head>
</head>
<body>
<div id="test" style="border: 1px solid;"></div>
<script text="text/javascript">
var html = "<html><head></head><body><div id=\"container\" style=\"text-align:center;padding:8px 0;background-color:#f0f0f0;border:1px dashed;\"> <div id=\"dynamic_div\" style=\"width:100%;height:50px\">Some Content</div></body></html>";
function ui_aa(element_id,content){ // create an iframe and add txt into it.
var iframe = document.getElementById(element_id).appendChild(document.createElement('iframe')),
doc = iframe.contentWindow.document;
iframe.style.cssText = "width:100%";
iframe.frameBorder = 0;
iframe.scrolling= 'no';
doc.open().write(content);
doc.close();
doc.body.style.cssText = "margin:0px;padding:0px;height:100%";
var height = doc.body.scrollHeight;
iframe.height = height;
};
ui_aa('test',html);
</script>
</body>
</html>

The iframe gets a height value for unknown reason to me, to give it a height value such as 0 did the trick, The doc.body.style.cssText overwrites the height value to 100% anyway, so you don't need to worry.
function ui_aa(element_id,content){ // create an iframe and add txt into it.
iframe.height= '0';
};
Example JSFiddle

Because of your <div id="container">
Automatically it wont be as tall as your iframe.
Add some style to it.
#container {
height: 100%;
display: block;
}

Prevent backspacing HTML in an iFrame.

I am using an iFrame as a text editor and want to ensure that the first part of the body is always a p tag. As such, I have it set so when users first click on the body it will insert
<p><br></p>
This works, unless the user holds down the backspace button. Once the user runs out of plaintext to backspace, it removes the tags above.
I have captured the event for backspace, but how can I prevent the users from removing the paragraph tags?

I got 11 options (I'm assuming you are using jQuery).
First, capture the keydown event, and if the value is equal to the default value, prevent the action. This will probably be inside to source html of the iframe.
$('#editor').unbind('keydown').bind('keydown', function (event) {
var doPrevent = false;
if (event.keyCode === 8 && $('#editor').html() === '<p><br></p>'){
event.preventDefault();
}
});
Option two: just make the element that's editable a div instead.
I prefer to avoid the use of an iframe. They make things needlessly complicated (imo).
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></script>
<script type="text/javascript">
function DoEdit(){
var idContent = document.getElementById('idContent');
idContent.contentEditable = "true";
//var editor = (idContent.contentWindow || idContent.contentDocument).content.document;
//editor.designMode = "on";
//editor.body.contentEditable = "true";
//editor.contentEditable = "true";
}
function ShowContent(){
var contentValue = "<p><br></p>"+$('#idContent').html();
alert(contentValue)
}
$(document).ready(function(){
DoEdit();
$('#showContentBtn').click(function(){
ShowContent();
});
});
</script>
</head>
<body>
<p><br></p>
<div style="text-align: center;margin:0 auto;width: 500px; height: 300px; border: solid; border-width: 2px;">
<div id="idContent" style="text-align: left; width:100%; height: 100%">
</div>
</div>
<div style="text-align: center;"><input id="showContentBtn" type="button" value="Show Content"></div>
</body>
</html>
Added a button in case there was some requirement to get the value for the content and keep those elements in it.
Option 3: If it needs to be inside the iframe, just set url for the above as the src for the iframe.
<html>
<body>
<div style="text-align: center">Edit Frame</div>
<iframe src="/widgets/editor/rich-text" ></iframe>
</body>
</html>
I hope that this will give you a few ideas you can work with inside your project.

Add textbox into iframe and append in a different html

Is it possible to add a textbox into an iframe, and append it into the src of the iframe. So i have created an modal box displaying a button for the user to click "ADD BUTTON"
<div id="addFeature" class="openAdd">
<div>
X
<h2>Add...</h2>
<button class="text" type="button">Text</button>
</div>
</div>
As the user clicks on the button, I need the modal box to close and a text box added. The following iframe is within main.html. As you can see the iframe displays the other html page.
<div>
<iframe class="newIframe" id="newIframe" src="webpage.html" onload="iFrameOn();">
Your browser does not support Iframes
</iframe>
</div>
Though I need the textbox to be added in webpage.html which is
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="index.js"></script>
</head>
<body onload="iFrameOn();">
<div id="design">
</div>
</body>
</html>
JS:
addTextBox() {
var text = "'<div><input type='textbox'/></div>'"
var textbox = document.createElement('div');
textbox.innerHTML = text;
var addText = document.getElementById('div').src = "webpage.html";
addText.appendChild(textbox);
}
Is it possible to do what I'm asking?

I'm afraid explaining this in the way you're trying to do this now, would be an endless swamp. Here's some guidelines, how you can achieve this quite easy.
Probably you need to remove the onload from iframe tag first. Then put these lines to your main page:
var textForIframe; // Take care that this variable is declared in the global scope
function addText () {
document.getElementById('newIframe').src = 'webpage.html';
textForIframe = '<div><input type="text" /></div>'; // or whatever text you need
return;
}
When ever your dialog is ready, call addText().
Then in webpage.html, remove the onload from body tag, and add the function below to somewhere after <script src="index.js"></script> tag.
window.onload = function () {
var addTextElement = document.getElementById('design'), // or whatever element you want to use in iframe
textToAdd = parent.textForIframe;
// depending on what iFrameOn() does, place it here...
addTextElement.innerHTML = textToAdd;
iFrameOn(); // ... or it can be placed here as well
return;
};
These snippets add a new input type="text" to #design within iframe.