We Keep Coding

How to load iframes with load more button using javascript

I have a page which display 4 small iframes and i have one load more button. What I want is: code for load more button that when button is clicked, it will display more iframes 3 or 5. (i will add these).
I have code for a iframe like this below:
<div style="margin:0px; padding:0px;">
<iframe style="width: 100%; overflow:hidden; margin-top:-0px;" width="400" height="378" src="" allowtransparency="true" frameborder="0"></iframe>
</div>
<button class="btn">Load More</button>
I followed this here but it didnot work for me.
jQuery load first 3 elements, click "load more" to display next 5 elements
Please help me. Thanks

An iframe creater object I created below
initialize the iframe object
add all iframe links when initializing iframe object
add parent container you would like ALL iframeS to be inside. In my example is the body of the document
add an event listener to button which will trigger iframe method name add_iframe()
counter = 0
function iframe_creator(parent, src_array) {
this.src_array = src_array;
this.parent = parent;
this.template = '\
<iframe style="width: 100%; overflow:hidden; margin-top:-0px;" width="400" height="378" src="" allowtransparency="true" frameborder="0"></iframe>\
';
this.add_iframe = function() {
for (i = 0; i < 5; ++i) {
if (counter < this.src_array.length) {
var div = document.createElement('div');
div.innerHTML = this.template;
div.getElementsByTagName('iframe')[0].src = this.src_array[counter];
div.style = "margin:0px; padding:0px;"
this.parent.appendChild(div);
++counter;
} //end if
}
}
}
create_frame = new iframe_creator(document.body, ['https://en.wikipedia.org/wiki/Nature', 'https://en.wikipedia.org/wiki/Nature','https://en.wikipedia.org/wiki/Nature','https://en.wikipedia.org/wiki/Nature','https://en.wikipedia.org/wiki/Nature']);
document.getElementById('button').addEventListener('click', function() {
create_frame.add_iframe()
})
iframe {
border: solid black;
}
<button id="button">
press
</button>

First, give your <div> where you want to place your <iframe>-Tags in an ID so that you can select and interact with it using JS.
Then use JS to create a function which will add a new <iframe>-Tag to your wrapping div.
http://codepen.io/anon/pen/EgdKQp
HTML:
<div id="wrapper"></div>
<button onclick="loadMore()">Load More</button>
JS:
function loadMore() {
var wrapper = document.getElementById('wrapper'); // Get wrapper
var iframe = document.createElement('iframe'); // Create new iframe
wrapper.appendChild(iframe); // Set iframe as child of wrapper
// Set the initial url like this:
iframe.contentWindow.document.location.href = 'http://codepen.io/';
}

HTML - Button is cancelled only after second click

I have a very simple code: I want to cancel a button after it's clicked to display something else. I tried this way
HTML:
<div id="container">
<input type="button" value="New game" onclick="newGame()" />
</div>
js:
function newGame() {
var container = document.getElementById("container");
container.removeChild(container.childNodes[0]);
}
What happens is the button gets cancelled only if I click it two times. Where did I get wrong?
I'm sorry if this is a repost, I tried to check but didn't find a quetion identical to mine

It appears as if your code is going to remove the button once you click on it. Is this correct, or are we not looking at the full markup?

If you remove \n (i.e new line) your code will work
try like this
function newGame() {
var container = document.getElementById("container");
debugger;
container.removeChild(container.childNodes[0]);
}
<div id="container"><input type="button" value="New game" onclick="newGame()" /></div>
The reason why your code is not working is, when you hit enter after div, HTML DOM will automatically creates one dummy text node as it's child. hence your input node became the second child for your container.
Working fiddle
Hope it helps :)

try this:
function newGame() {
var container = document.getElementById("container");
// change 0 to 1
container.removeChild(container.childNodes[1]);
}
container.childNodes[0] is a text Node, in which the text is Newline

I gave id to the button and removed it using id.
In your case it is not removing in first time because container.childNodes[0] in first time is not a button. Try your self using console.log in your function.
function newGame() {
var container = document.getElementById("container");
var d_nested = document.getElementById("button_1");
var throwawayNode = container.removeChild(d_nested);
//container.innerHTML='';
}
<div id="container">
<input id="button_1" type="button" value="New game" onclick="newGame()" />
</div>

Alternatively, you could do this:
<div id="container">
<input type="button" value="New game" onclick="document.getElementById('container').removeChild(this);" />
No separate JS file needed.

Replacing content within a div with an iframe

I am trying to replace the content of a div with an iframe that allows the user to input a URL to display another page. I will, ideally, add another button next to the Change URL button that links to a specific page.
However, I cannot get this code to work. I can get the div to be replaced with text and some html. But the iframe code won't load when I put this in. I am suspecting it's due to the quotation marks.
I am a bit of a novice at javascript/JQuery so any help with this will be greatly appreciated.
Here is what I have going for the code below.
<style>
#target {
width: 200px;
height: 340px;
}
</style>
<script>
$(function load($){
var $iframe = $('#target'),
$change = $('#change'),
$url = $('#url');
$change.click(function url() {
$iframe.attr('src', $url.val());
});
});
document.getElementById("c_emot").innerHTML = "<iframe id="target" src="/"></iframe><br>
<input id="url" type="text"><br>
<button id="change" type="button">Change URL</button>";
</script>

Your quoted string is all wrong. Try this:
document.getElementById("c_emot").innerHTML = '<iframe id="target" src="/"></iframe><br>
<input id="url" type="text"><br><button id="change" type="button">Change URL</button>';
for reference: http://www.javascripter.net/faq/quotesin.htm
Also, your click event is not being bound to the button after the button is created. You can make it persistent on the button's container like this:
$('#c_emot').on('click', '#change', (function(){
$('#target').attr('src', $('#url').val());
});
And if youre going to mess with the DOM, you have to be sure that the element you want to manipulate has already been created when your code is run:
$(document).ready(function(){
// put all your code here
});
but maybe you should be creating elements instead of dumping markup into the container:
document.onreadystatechange = function () {
if(document.readyState == "complete") {
var container = document.getElementById("c_emot");
var iframe = document.createElement('iframe');
iframe.src = "/";
container.appendChild(iframe);
var input = document.createElement('input');
input.id = "url";
input.type = "text";
container.appendChild(input);
var button = document.createElement('button');
button.id = "change";
button.innerHTML = "Change URL";
button.addEventListener('click', function() {
iframe.src = input.value;
});
container.appendChild(button);
}
}
Not sure if that event listener will work, got to try it and see :)
Have you tried just doing it without messing around with the DOM?...
<iframe name="urlbox"></iframe>
<input type="text" id="urlinput" />
<button onclick="window.open(document.getElementById('urlinput').value, 'urlbox')">Navigate!</button>
Most browsers wont let you navigate the iframe to a different domain for security anyway, so maybe this is all for nothing.

This demo has 2 features:
Using the text input, user can enter a URL to change the src of the iframe.*
This is possible by using this function:
function changeSrc(src) {
var iframe = document.getElementById('site');
site.src = src;
}
*Be aware that not all sites are iframe friendly, so expect some sites that my function will simply not work for.
Notice the links to various sites. Their behavior has been alter--rather than jumping to the site, it opens the site within the iframe.
Each link is a normally constructed anchor element <a> with one exception. It's value for their attribute target is site.
site is the name of the iframe. When an anchor has target="name of iframe"` the anchor opens the site within that targeted iframe.
This must be the iframe's name attribute not the iframe's id.
Snippet
function changeSrc(src) {
var iframe = document.getElementById('site');
site.src = src;
}
body {
width: 100vw;
height: 100vh;
overflow: hidden;
}
section {
height: 100%;
width: 100%;
overflow-y: auto;
}
<form id="form" onchange="changeSrc(url.value);">
<fieldset>
<legend>Enter URL</legend>
<input id="url">
<input type="submit" />
</fieldset>
</form>
ROOT Example W3Scools jsFiddle
jsDelvir JavaScript Tut Plain JS
<section>
<iframe id="site" name="site" src="/" width="100%" height="100%" frameborder="0"></iframe>
</section>

Alert On Button Click And Move User To Opened New Tab

I have Created a Button With Link Which opens in new tab. I have also used javascript to alert.
Currently this code is working perfectly. But After Clicking OK in Alert, user stays on same page. But I Want To Move User To New Opened Tab. Is it possible ?
My Code Is -
<form><input type="button" id="anchor1" style="cursor:pointer" value="Click Here" onClick="window.open(href='http://www.google.com')"></form>
<script type="text/javascript">
var anchor = document.getElementById('anchor1');
// or anchor = getElementsByTagName('a') then do ('a')[0]
anchor.addEventListener('click', doSomething, false);
function doSomething() {
alert('You Are About To Open New Tab');
}
</script>
Help Needed
Here Is My
JSFIDDLE

This one is super simple.
You need to remove the onclick attribute from the input tag.
Then, put your code to open new tab using JS after your alert line.
<form><input type="button" id="anchor1" style="padding:5px; cursor:pointer" value="Click Here"></form>
In your JS code, do this:
var anchor = document.getElementById('anchor1');
anchor.addEventListener('click', doSomething, false);
function doSomething() {
alert('You Are About To Open New Tab');
var win = window.open("http://google.com", '_blank');
win.focus();
}
Fiddle

Style the anchor tag by changing the text color to black and changing text-decoration to none:
<button>Click here</button>

HTML
<form><input type="button" id="anchor1" style="padding:5px; cursor:pointer" value="Click Here" ></form>
JS
var anchor = document.getElementById('anchor1');
// or anchor = getElementsByTagName('a') then do ('a')[0]
anchor.addEventListener('click', doSomething, false);
function doSomething() {
alert('You Are About To Open New Tab');
window.open(href='http://www.google.com')
}

Hide form from parent page until specific iframe element ID loads

All I need is to show parent page form only if specific element ID loads inside iframe. parent/iframe are on the same domain. How can I achieve that using javascript?
<form id="Search" action="../search.php" target="my-iframe" method="post">
<input type="text" id="location" name="keywords[all_words]" />
<a href="#" onclick="document.getElementById('Search').submit()" >Search</a>
</form>
<iframe id="myiframe" src="../page.html" name="myiframe" width="100%" height="100%" scrolling="no" frameborder="0"></iframe>

You can use jQuery to attach a load event to the iframe. Here's a working example: http://jsfiddle.net/kPqbS/

You can use something like this:
// wait for the page to finish loading
window.onload = function(){
// hide your form
document.getElementById('Search').style.display = 'none';
// get the document of the iframe
var frameDocument = document.getElementById('myiframe').contentWindow.document;
// if this is true the element with id 'test' is in the frame
if(frameDocument.getElementById('test')){
// show your form
document.getElementById('Search').style.display = 'block';
}
}