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>
Related
I have a field where a user can input raw HTML. This looks like:
<input type="text" id="editor" value="<p>Hi,</p><p>Here is a <a href='domain.com'>link</a> I'd like you to visit.</p>" />
Now, I need a "copy to clipboard" button that takes the content of this field in such a way that we can paste it as formatted text (without the HTML markup). In the example above, the copy/paste output should be:
Hi,
Here is a [link][1] I'd like you to visit.
I've implemented the "copy to clipboard" button like this:
let answer = document.getElementById("editor");
answer.select();
document.execCommand("copy");
This places the content of the input on the clipboard, however when I paste it elsewhere I get the raw HTML.
I need some way to convert HTML into formatted text, but the only solution I found is this and it doesn't work for links:
enter link description here
Is there a native Javascript way to do this? If not, what is the best solution?
Try with Element.insertAdjacentHTML()
let answer = document.getElementById("editor");
let result = document.getElementById("result");
let button = document.getElementById("button");
button.onclick = function() {
answer.select();
document.execCommand("copy");
};
function conVert(event) {
event.preventDefault();
let val = answer.value
console.log(val)
result.insertAdjacentHTML('afterbegin', val);
// you can use event.target here to past it as formated to targeted element onpaste
}
// on button
buttonpaste.onclick = function(event) {
conVert(event)
}
//on paste
document.onpaste = function(event) {
console.log("Paste")
conVert(event)
};
#result {
min-height: 100px;
background-color: yellow
}
#result2 {
min-height: 100px;
background-color: gray;
}
<input type="text" id="editor" value="<p>Hi,</p><p>Here is a <a href='domain.com'>link</a> I'd like you to visit.</p>" />
<button id="button">COPY</button>
<button id="buttonpaste">PASTE</button>
<div id="result" contentEditable="true"></div>
<div id="result2" contentEditable="true"></div>
I want to make a popup text box that shows source codes from the textarea in the popup as a web page wile at the same time it will not show the print button codes in the textarea because that text is meant to be as functions for the popup only. As you can see my textarea content has both javascript and html who needs to be hidden from the textarea, but at the same time needs to be inside the text area for the popup to work.
This means I can not put them outside the textarea because then that function will not show in the popup window who will show everything that is in the textarea of the web editor editor unless the popup is made to target a div that holds the textarea and and not the textarea directly. Even so that presents a problem as the textarea will not anymore be converted into a web page when getting the popup.
I am using this textarea for my popup:
<textarea name="textfield" cols="107" rows="31" id="CodeExample" wrap="soft" style="font-size:12px; font-family: Arial, Helvetica, sans-serif; color:#ffffff; background-color:rgba(0,0,0,0.8); resize: none;" placeholder="The is Source Codes here"><script language="Javascript">
function printit(){
if (NS) {
window.print() ;
} else {
var WebBrowser = '<OBJECT id="WebBrowser1" width=0 height=0 CLASSid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"></OBJECT>';
document.body.insertAdjacentHTML('beforeEnd', WebBrowser);
WebBrowser1.ExecWB(6, 2);//Use a 1 vs. a 2 for a prompting dialog box WebBrowser1.outerHTML = "";
}
}
</script>
<script language="Javascript">
var NS = (navigator.appName == "Netscape");
var VERSION = parseInt(navigator.appVersion);
if (VERSION > 3) {
document.write('<form><input type=button value="Print this Page" name="Print" onClick="printit()" style="margin-bottom: 0px; font: bold 11px Arial, Sans-Serif;"></form>');
}
</script></textarea>
<br>
<!-- Run Textarea field in popup BEGIN -->
<script type="text/javascript">
var win = null;
function NewWindow(mypage,myname,w,h,scroll) {
LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
settings =
'height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',resizable'
win = window.open(mypage,myname,settings);
if (window.focus) {win.focus()}
var t = document.form1.textfield.value;
win.document.write(t);
}
</script>
<input type = "button" value = "Preview" name = "preview" onclick = "NewWindow('','myPop','500','400','yes')">
<!-- Run Textarea field in popup END -->
So now what I want is for the print button codes to not be visible in the textarea, but that they are visible as a print button when the popup button is run. So that the print button adds to the visible source codes added into the box by the web designer.
UPDATE
When I posted this question I found no answer no were on the entire internet.
After fiddling with it for a long time I posted the question here. And by luck I found an answer of how to do it after a few minute of after posted the question. I will not delete the question since I am the FIRST on the internet to find and answer to this question.
Solution:
I solved the problem by simply making a hidden textarea linked to the input popup javascript who is also linked to the visible textera. That way what ever is put inside the visble textarea will come up in the popup and so will also the function from hidden in the hidden textarea come on the same popup when clicked on the "Preview" button.
You can put any HTML, CSS or JavaScript code inside the visible and inside the hidden textarea wile having all the input codes hidden from the visible textarea it but active when the popup is turned on.
<form name = "form1">
<textarea name="textfield" cols="107" rows="31" id="CodeExample" wrap="soft" style="font-size:12px; font-family: Arial, Helvetica, sans-serif; color:#ffffff; background-color:rgba(0,0,0,0.8); resize: none;" placeholder="Put your Source Codes here">
</textarea>
<textarea hidden="on" name="textfield2" cols="1" rows="1" id="CodeExample2">
<script language="Javascript">
function printit(){
if (NS) {
window.print() ;
} else {
var WebBrowser = '<OBJECT id="WebBrowser1" width=0 height=0 CLASSid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"></OBJECT>';
document.body.insertAdjacentHTML('beforeEnd', WebBrowser);
WebBrowser1.ExecWB(6, 2);//Use a 1 vs. a 2 for a prompting dialog box WebBrowser1.outerHTML = "";
}
}
</script>
<script language="Javascript">
var NS = (navigator.appName == "Netscape");
var VERSION = parseInt(navigator.appVersion);
if (VERSION > 3) {
document.write('<form><input type=button value="Print this Page" name="Print" onClick="printit()" style="margin-bottom: 0px; font: bold 11px Arial, Sans-Serif;"></form>');
}
</script>
</textarea>
<br>
<!-- Run Textarea field in popup BEGIN -->
<script type="text/javascript">
var win = null;
function NewWindow(mypage,myname,w,h,scroll) {
LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
settings =
'height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',resizable'
win = window.open(mypage,myname,settings);
if (window.focus) {win.focus()}
var t1 = document.form1.textfield.value;
var t2 = document.form1.textfield2.value;
win.document.write(t1);
win.document.write(t2);
}
</script>
<input type = "button" value = "Preview" name = "preview" onclick = "NewWindow('','myPop','500','400','yes')">
<!-- Run Textarea field in popup END -->
</form>
NOTE:
If you are making a web editor online as I am with preview function then it all of a sudden it is making sense. Because you will want to preview your codes that you text inside the textarea box and when previewing you will also want that the textarea box shows some extra buttons such as print the preview you made. Perfect to test a design or a page and such and then print it out by the click of one button on the popup generated by the textarea box. Look at the solution I found and test it yourself and see what I mean and why. It will work with any HTML, CSS and JS source codes.
Test it yourself if you do not understand why it was needed and how it works.
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/';
}
I know its really simple, but why doesn't this code alert on key presses?
Tried with both Chrome and Firefox.
<html>
<head></head>
<body style="height: 100%; margin: 0px; padding: 0px;">
<div style="height: 100%;" id="main">sds</div>
<script>
window.onload = function()
{
var m = document.getElementById("main");
m.onkeydown = function(event) { alert("keydown!"); };
m.focus();
};
</script>
</body>
</html>
thanks
You shouldn't catch key presses on an element unless it is an <input> field. Replace main with the body:
var m = document.getElementsByTagName("BODY")[0];
This will catch all key strokes on the page unless there are nested handlers on input fields.
The problem you encounter is because of event bubbling/trickling and input focus. The main is not "focused" upon so it doesn't get any keyboard event fired.
Body, on the contrary, is implicitly "focused" when no text field is focused and no text selection is made.
Following is the javascript code
var text;
var name;
window.onload = init;
function init() {
var button = document.getElementById("submitButton");
text = document.getElementById("nameTextInput");
button.onclick = handleButtonClick;
}
function handleButtonClick() {
if (text.value == "") {
alert("oops !! Enter Name");
}
else {
var content = document.getElementById("content");
content.removeChild(h4);
content.removeChild(img);
content.removeChild(form);
name = document.getElementById("name");
name.innerHTML = text.value + ", I am tracking you at ";
getMyLocation();
}
}
When I click the button, the elements are removed but name div doesn't show anything. It works on IE8 but in chrome, safari and opera it falters.
Following is the HTML :-
<body>
<div class="topMiddle">Locate ME ;-)
</div>
<div id="content" class="content">
<h4 id="h4">Your Name</h4>
<img id ="img" src="rows-hand-.png" alt="arrow image" height="70" width="70" />
<form id="form">
<input type="text" id="nameTextInput" size="40" placeholder="Enter your name dear" class="inputTextClass">
<input type="button" id="submitButton" value="Submit" class="inputButtonClass">
</form>
<div id="name" class="name">
</div>
<div id="user" class="user">
<div id="map_canvas"></div>
</div>
<div id="me" class="me">
</div>
</div>
Following is the CSS :-
.content
{
text-align:center;
margin-top:10px;
}
h4
{
color: #E9E9E9;
}
.inputTextClass
{
width:150px;
}
.inputButtonClass
{
margin-top:20px;
width:80px;
}
.name
{
color:#000;
font-size:16px;
}
EDIT
Here is the online link :- http://rdinvent.com/locateMe.html
This code shouldn't work, because you didn't define variables h4, img and form.
content.removeChild(h4);
content.removeChild(img);
content.removeChild(form);
Why it does work in IE8, is because IE does by default make global JavaScript variables for each element with an id attribute, with the same name. So h4, img and form are equivalent to the following code in IE.
h4 = document.getElementById('h4')
img = document.getElementById('img')
form = document.getElementById('form')
Just add this, and the code will work in the other browsers as well.
What is happening here is that you're not actually using your own variable named name, but a property of the global object window named name, so it's equivalent to using window.name which is a string and cannot be set to any other type (the browser forces that). So when you're setting it to the div it gets converted to a string and the string does not have a property innerHTML on it so you're setting a new property with that name which does nothing.
You can do two things:
You can rename your global variable name to something that's not in window object already (like name1 or inputName);
You can put all your code inside a function and run that. This would make a new scope and your variables would override and hide the global ones.
(function(){
/* your code goes here */
})();
EDIT:
It's just this name which messes everything up:
name = document.getElementById("name");
Replace this line and the following with:
document.getElementById("name").innerHTML = text.value + ", I am tracking you at ";
And of course, remove the var name; at the beginning.
name is a global property (window.name) and should not be used in the global scope otherwise.
Is your div "name" outside the form.
Enable javascript in the browsers...
Check this link for reference
Adjusting images, JavasScript, and other web content settings
Not all browsers support setting innerHTML or innerText directly. What you can do is create a text-element and append as a child.