I need update iframe's content on input[text] changed(or on some another event).
For example: I'm typing in parent's input "Hello World!!!", and iframe's <h1>Hi</h1> is changing to
<h1>Hello World!!!</h1> symbol by symbol.
Better if solution will be on jQuery, but vanilla js is ok, too))
Thank you very much.
P.S. Sorry for my bad English(
better way is using Window.postMessage => https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
parent Page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>a Page..</title>
<style>
body { font-size: 16px; font-family: Arial, Helvetica, sans-serif; }
iframe { width: 300px; height: 200px; border: 1px solid #4593c6; }
</style>
</head>
<body>
<p>parent input :
<input id="in-Txt" type="text" placeholder="type something">
<button id="Bt-Send2iFrame">Send2iFrame</button>
</p>
<iframe id="in-Frame" src="xyz_frame.html" ></iframe>
<script>
const inText = document.querySelector('#in-Txt')
, btSend = document.querySelector('#Bt-Send2iFrame')
, inFramW = document.querySelector('#in-Frame').contentWindow
btSend.onclick=_=>{
let info = { inTxt: inText.value }
inFramW.postMessage( JSON.stringify(info), "*")
}
</script>
</body>
</html>
iframe page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<p> the iframe </p>
<p id="info-Parent">...</p>
<script>
const infoParent = document.querySelector('#info-Parent')
window.onmessage=e=>
{
let message = JSON.parse ( e.data )
infoParent.textContent = message.inTxt
}
</script>
</body>
</html>
You can pass the value on the parent page as a parameter to the iframe.
Say for example the following
Parent HTML,
<input type="text" id="parenteElem">
<iframe id="frameOnParent">
Parent Script:
<script type="text/javascript">
$("#parentElem").on("change", function(event) {
$('#frameOnParent').attr('src', "test.html?param1=" + $(this).val());
})
</script>
Iframe HTML:
<h1>Hi</h1>
Iframe Script:
<script type="text/javascript">
function getHeader() {
var headerText = window.location.search.substring("param1");
return headerText;
}
var heading = getHeader();
$("h1").html(heading);
</script>
Related
Hi All I am new in JavaScript. I have one HTML file. And I need to add some word in the class's name. Is there any way to do it using JavaScript?
For Example
<!Doctype HTML>
<html>
<head>
<style>
.heading{color:red;}
.text{color:red;}
</style>
</head>
<body>
<h1 class="heading">This is heading.</h1>
<p class="text">This is my text.</p>
</body>
</html>
In need to add "test-" in the class name in head and body both using JavaScript.
After using JavaScript function it should look like this.
<!Doctype HTML>
<html>
<head>
<style>
.test-heading{color:red;}
.test-text{color:red;}
</style>
</head>
<body>
<h1 class="test-heading">This is heading.</h1>
<p class="test-text">This is my text.</p>
</body>
</html>
It would be great help! Thanks in advance.
//$(".heading").addClass('test-heading').removeClass('heading');
//$(".text").addClass('test-text').removeClass('text')
$('.text').attr('class', function() {
return $(this).attr('class').replace('text', 'test-text');
});
$('.heading').attr('class', function() {
return $(this).attr('class').replace('heading', 'test-heading');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html>
<head>
<style>
.heading{color:red;}
.text{color:red;}
</style>
</head>
<body>
<h1 class="heading">This is heading.</h1>
<p class="text">This is my text.</p>
</body>
</html>
You can loop Inside the body and add new class.
$("body").children().each(function(index, element) {
var oldclass = $(this).attr('class');
var newClass = "test_" + oldclass
$(this).removeClass(oldclass).addClass(newClass);
});
.test_heading {
color: blue;
}
.test_text {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<style>
.heading {
color: red;
}
.text {
color: red;
}
</style>
</head>
<body>
<h1 class="heading">This is heading.</h1>
<p class="text">This is my text.</p>
</body>
</html>
Find all classes of any element, loop through it, add new class and remove existing classes
var element = "body";
var className= "test-";
var classes = $(element).attr('class').split(" ");
classes.forEach(function(i,obj){
$(element).addClass(className + i);
$(element).removeClass(i);
});
I have looked up a question on the website (How to display javascript variables in a html page without document.write)
But when executing it in my own coding program it does not work. Hope you can help out!
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<meta charset ="UTF-8">
<meta name="viewport" content="width=device-width">
<style type="text/css">
html {
font-family: sans-serif;
font-size: 16px;
}
h1 {
margin: 1em 0 0.25em 0;
}
input[type=text] {
padding: 0.5em;
}
.jsValue, .jqValue {
color: red;
}
</style>
</head>
<body>
<!-- This <input> field is where I'm getting the name from -->
<label>Enter your name: <input class="name" type="text" value="World"/></label>
<!-- Plain Javascript Example -->
<h1>Plain Javascript Example</h1>Hello <span class="jsValue">World</span>
<!-- jQuery Example -->
<h1>jQuery Example</h1>Hello <span class="jqValue">World</span>
<script>
//https://stackoverflow.com/questions/9689109/how-to-display-javascript-variables-in-a-html-page-without-document-write
// Plain Javascript Example
var $jsName = document.querySelector('.name');
var $jsValue = document.querySelector('.jsValue');
$jsName.addEventListener('input', function(event)){
$jsValue.innerHTML = $jsName.value;
}, false);
</script>
</body>
</html>
Because you have syntax error.. check the console.
Correct code should be:
$jsName.addEventListener('input', function(event){
$jsValue.innerHTML = $jsName.value;
}, false);
I am using ngPaste on a contentEditable div instead of input type text. However, I am unable to fetch the pasted content in the way mention in this link. I am always getting undefined in my handler for ngPaste. Here's the code:
HTML:
<div contentEditable="true" ng-paste="stripHtml($event.clipboardData.getData('text/plain'))">
</div
>
JS:
scope.stripHtml = function(content) {
console.log(content); //this is always undefined
}
What am I doing wrong? How can I fetch the pasted content?
The Below Code (Modified from Sergey's) Worked in Windows platform, Firefox 43.0.4, Chrome 47.0.2526.111 m but NOT in IE 11.0.9.
<!DOCTYPE html>
<html>
<head>
<style>
.editable {
background: white;
height: 55px;
border: 2px solid blue;
width: 55%;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('sampleController', function($scope) {
$scope.stripHtml = function(content) {
alert(content);
console.log(content);
};
});
</script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>AngularJS ng-paste within ContentEditable Div</title>
</head>
<body ng-app="myApp">
<div ng-controller="sampleController">
<div class="editable" contentEditable="true" ng-paste="stripHtml($event.clipboardData.getData('text/plain'))"></div>
</div>
</body>
</html>
I'm working on an application with modal overlays that appear within iFrames when the corresponding buttons are pressed. To close one of these modal overlays, the Cancel button is defined in the parent window this way:
Cancel
I'd like to replace this with a JavaScript function (let's call it onCancel() ) so I can reset some values if needed in addition to closing the overlay. What is the JavaScript equivalent to "#close"?
You can't close an iFrame, you either have to remove or hide it. The example below removes the iframe. If you just want to hide you can replace the last line (containing removeChild with this one frame.style.display="none"; You can then get it back by using this line frame.style.display="block";
<!DOCTYPE html>
<head>
<title>test</title>
<style type="text/css">
.top {
height: 100px;
width: 200px;
background-color: blue;
}
</style>
<script type="text/javascript">
function removeIFrame() {
var frame = document.getElementById("iframe");
frame.parentNode.removeChild(frame);
}
</script>
</head>
<body>
<div class="top" onclick="removeIFrame();"></div>
<iframe id="iframe" src="/" width="200" height="100"></iframe>
<div class="top"></div>
</body>
<!DOCTYPE html>
<head>
<title>test</title>
<style type="text/css">
.top {
height:100px;
width:200px;
background-color:green;
}
</style>
<script type="text/javascript">
function removeIFrame() {
var frame = document.getElementById("target");
frame.parentNode.removeChild(frame);
}
</script>
</head>
<body>
<div class="top" onclick="removeIFrame();"></div>
<iframe id="target" src="http://www.disney.com" width="100" height="100"></iframe>
<div class="top"></div>
</body>
The approach that works for me is to define the following JavaScript function in the parent page:
function onCancel()
{
var myIFrame = document.getElementById("myIFrame");
var myForm = myIFrame.contentDocument.myForm;
var stuffWasChanged = myIFrame.contentDocument.stuffWasChanged;
if (stuffWasChanged == "true")
myForm.action = "reset.do";
myForm.submit();
location.href = '#';
}
Note that if the stuffWasChanged flag was not set to true, then no action is defined for the form in question, so the modal overlay simply goes away without any servlet method being called.
I want to create a website where I can write and preview a website. The problem is that I want to preview it in an iframe, because then the website isn't influenced by the HTML code around the iframe.
Is there a way to show a webpage in an iframe tag with a string as source instead of an URL?
This is how it should look (just an iframe).
<textarea onkeyup="document.getElementById("body").innerHTML=this.value;"></textarea>
<div id="body"></div>
In fact, JSFiddle does the same, so there must be a way. Ideas?
You can modify the content of the document specified by the src attribute, using contentWindow.document. So, assuming you had a <textarea> with the markup you want to preview, you could do something like this:
Editor document:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Edit iframe example</title>
<style>
.editors, .preview { float: left; display: block; }
.editors { width: 500px; margin-right: 25px; }
.editors textarea { width: 100%; height: 300px; }
.preview { width: 800px; }
.preview iframe { width: 100%; height: 800px; }
</style>
</head>
<body>
<div class="editors">
<p>
<label>CSS</label>
</p>
<p>
<textarea id="preview-editor-CSS" onkeyup="updatePreviewCSS(this)"></textarea>
</p>
<p>
<label>HTML</label>
</p>
<p>
<textarea id="preview-editor-HTML" onkeyup="updatePreviewHTML(this)"></textarea>
</p>
</div>
<div class="preview">
<iframe id="preview" src="preview.html"></iframe>
</div>
<script>
function updatePreviewHTML(elem) {
var frame = document.getElementById('preview');
var content = elem.value;
frame.contentWindow.document.body.innerHTML = content;
}
function updatePreviewCSS(elem) {
var frame = document.getElementById('preview');
var content = elem.value;
frame.contentWindow.document.getElementsByTagName('style')[0].innerHTML = content;
}
</script>
</body>
</html>
The "preview" document:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Preview iframe example</title>
<style></style>
</head>
<body>
</body>
</html>
I've only tried this locally, on Firefox 31, so caveat emptor.