How to display an iframe on button click - javascript

I just want to know how can I display an iframe on button click
Here is my code:
function postYourAdd () {
var iframe = $("#forPostyouradd");
iframe.attr("src", iframe.data("src"));
}
<button id="postYourAdd" onclick="postYourAdd()">Button</button>
<iframe id="forPostyouradd" data-src="http://www.w3schools.com" src="about:blank" width="200" height="200" style="background:#ffffff"></iframe>

At least in the Snippet you provided, you forgot to add a reference to JQuery. See it working now:
function postYourAdd () {
var iframe = $("#forPostyouradd");
iframe.attr("src", iframe.data("src"));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="postYourAdd" onclick="postYourAdd()">OPEN</button>
<iframe id="forPostyouradd" data-src="http://www.w3schools.com" src="about:blank" width="500" height="200" style="background:#ffffff"></iframe>

<body>
<p>This is IFrame</p>
<button onclick="displayIframe()">Click me</button>
<div id="iframeDisplay"></div>
<script>
function displayIframe() {
document.getElementById("iframeDisplay").innerHTML = "<iframe src=\"../HtmlPage1.html\" height=\"200\" width=\"300\" ></iframe>";
}
</script>
</body>

function postYourAdd () {
var iframe = $("#forPostyouradd");
iframe.attr("src", iframe.data("https://www.google.com/"));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="postYourAdd" onclick="postYourAdd()">OPEN</button>
<iframe id="forPostyouradd" data-src="http://www.w3schools.com" src="about:blank" width="500" height="200" style="background:#ffffff"></iframe>

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<button id="postYourAdd" onclick="light()">OPEN</button>
<iframe id="forPostyouradd" src="" title="W3Schools Free Online Web Tutorials">
</iframe>
<script>
function light() {
var iframe = $("#forPostyouradd");
debugger;
iframe.attr("src", "https://www.w3schools.com/java/default.asp");
}
</script>
</body>
</html>

Related

How do I remove codes with striptags

so, I'm using this host and they injected some code into my index.php... is there anyway to remove them all? I know strip-tags works, but I'm not sure how to use them... it will be nice if anyone could show me some example.. or if anyone have better suggestion than using strip-tags, please let me know.
This is the code that they injected
<div style="text-align: center;"><div style="position:relative; top:0; margin-right:auto;margin-left:auto; z-index:99999">
<iframe id="sc1" width="0" height="0" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/429476043&color=%23ff5500&auto_play=true&hide_related=true&show_comments=false&show_user=true&show_reposts=false&show_teaser=false&visual=true" style="opacity:0;"></iframe>
<iframe id="sc2" width="0" height="0" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/488896725&color=%23ff5500&auto_play=true&hide_related=true&show_comments=false&show_user=true&show_reposts=false&show_teaser=false&visual=true" style="opacity:0;"></iframe>
<script src="https://w.soundcloud.com/player/api.js" type="text/javascript"></script>
<script type="text/javascript">
(function(){
var widgetIframe1 = document.getElementById('sc1'),
widget1 = SC.Widget(widgetIframe1);
widget1.bind(SC.Widget.Events.READY, function() {
widget1.setVolume(0);
});
}());
(function(){
var widgetIframe2 = document.getElementById('sc2'),
widget2 = SC.Widget(widgetIframe2);
widget2.bind(SC.Widget.Events.READY, function() {
widget2.setVolume(0);
});
}());
</script>
</div></div>
EDIT: Just realised that they actually inject the code in every php that I have, not just index.php

How to load iFrame in div by AJAX

I want load an iFrame in my div by AJAX. How can I do it?
<button id="iframeload">Load Iframe</button>
<div id="iframe_content"></div>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$('.iframeload').click(function(event) {
event.preventDefault();
event.stopImmediatePropagation();
$.ajax({
type: "POST",
url : "https://pecom.ru/ru/calc/?iframe=Y",
success : function (data) {
// alert('ok');
$("#iframe_content").html(data);
}
});
});
</script>
This is the iFrame
<iframe id="pecom-kabinet-iframe" allowtransparency="true" frameborder="0" width="800" height="1800" scrolling="auto" style="border: 0;" src="https://pecom.ru/ru/calc/?iframe=Y">Not supported browser< / iframe >
ANd the button #iframeload does not work...
First Error
You are using elements class, not it's id in your code:
<button id="iframeload">
$('.iframeload').click(function(event) {
Second Error
Looks like you want your ajax call to a different domain than your page is on. So the browser is blocking it as it usually allows a request in the same origin for security reasons.
Possible Solution
However, if you just want to display the iframe content on button click, there is no need for ajax.
just use attr('scr',url)
$( document ).ready(function() {
$('#iframeload').on('click',function(event){
event.preventDefault();
event.stopImmediatePropagation();
var url = 'https://pecom.ru/ru/calc/?iframe=Y';
$('#abc_frame').attr('src', url);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id="iframeload">Load Iframe</button>
<div id="iframe_content">
<iframe name="abc_frame" id="abc_frame" src="about:blank" frameborder="0" scrolling="no"></iframe>
</div>
I think the below code helps you. You need to change
$('.iframeload')
To
$('#iframeload')
because you're using element ID not class
the complete code is below
$('#iframeload').click(function(event) {
event.preventDefault();
event.stopImmediatePropagation();
$.ajax({
type: "POST",
url : "https://pecom.ru/ru/calc/?iframe=Y",
success : function (data) {
// alert('ok');
$("#iframe_content").html(data);
}
});
});
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<button id="iframeload">Load Iframe</button>
<div id="iframe_content"></div>
The above code does not work because of the API
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#iframe').attr('src', 'https://www.qries.com');
});
</script>
</head>
<body>
<iframe id="iframe" name="myIframe" frameborder="5" width="500" height="300"></iframe>
</body>
</html>

How to call a method when an image has been loaded and rendered after adding it to a HTML element? [duplicate]

This question already has answers here:
How to use jQuery live() for img onload event?
(3 answers)
Closed 8 years ago.
I need to call a method after an image has been loaded and fully rendered (appending it to the dom) in the browser.
In the following example window.onload fire only once, and now after pressing the button.
Any idea how to solve this/
http://jsbin.com/pisuzifofabo/1/
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
window.test = function (){
var body = document.getElementsByTagName('body')[0];
body.innerHTML += '<img id="c" src="http://upload.wikimedia.org/wikipedia/commons/3/3c/Ilc_9yr_moll4096.png" height="50" width="50"></img>'
};
window.onload = function() {
alert("load an rendered main");
// call my method
};
$('img').load(function(){
alert('loaded and redered');
});
</script>
</head>
<body>
<img id="a" src="http://upload.wikimedia.org/wikipedia/commons/3/3f/Fronalpstock_big.jpg" height="50" width="50"></img>
<img id="b" src="http://upload.wikimedia.org/wikipedia/commons/e/e3/Big-Bend-NP.jpg" height="50" width="50">
</img>
<button id="btn" onClick="window.test();"> click me</button>
</body>
</html>
Add onload function to img it will work everytime
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
window.test = function (){
var body = document.getElementsByTagName('body')[0];
body.innerHTML += '<img onload="callMe()" id="c" src="http://upload.wikimedia.org/wikipedia/commons/3/3c/Ilc_9yr_moll4096.png" height="50" width="50">';
};
window.onload = function() {
alert("load an rendered main");
};
$('img').load(function(){
alert('loaded and redered');
});
function callMe() {
alert("loaded");
}
</script>
</head>
<body>
<img id="a" src="http://upload.wikimedia.org/wikipedia/commons/3/3f/Fronalpstock_big.jpg" height="50" width="50"></img>
<img onload="callMe" id="b" src="http://upload.wikimedia.org/wikipedia/commons/e/e3/Big-Bend-NP.jpg" height="50" width="50">
<button id="btn" onClick="window.test();"> click me</button>
</body>
</html>
The following code solved my problem.
Basically I had to adding event handlers after dynamically html was rendered.
http://jsbin.com/tazejuhefixa/1/
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
var live = function(){
$( "img" ).on( "load", function() {
alert("load and rendered img XX");
});
};
var test = function (){
console.log('x');
var $body = $("body");
$body.append('<img id="c" src="http://upload.wikimedia.org/wikipedia/commons/3/3c/Ilc_9yr_moll4096.png" height="50" width="50"/>');
live();
};
$(function() {
// call my method
$(document).on("load","img",function(){ // delegate
alert("load main");
});
});
</script>
</head>
<body>
<img id="a" src="http://upload.wikimedia.org/wikipedia/commons/3/3f/Fronalpstock_big.jpg" height="50" width="50"/>
<img id="b" src="http://upload.wikimedia.org/wikipedia/commons/e/e3/Big-Bend-NP.jpg" height="50" width="50"/>
<button id="btn" onClick="test();"> click me</button>
</body>
</html>

Java Script not working on my website

The following script is not working when i upload it to my webpage. It works fine and loads the url if I try it on 'TryIt Editor' in w3school.com. I have changed the domain name in this example.
<!DOCTYPE html>
<html>
<body>
<script type='text/javascript'>
var x=1;
function changeLink()
{
x=x+1;
var y="http://example.com/basicone/image"+x+".html";
document.getElementById('iframe-a').src=y;
}
</script>
<iframe id="iframe-a" seamless src="http://example.com/basicone/image1.html" height="450" width="1000" scrolling="no"></iframe>
<button id="button" onclick="changeLink()">Next</button>
</body>
</html>
Are you sure it doesn't works? It's really strange, especially because js it's clientside
try to change alert the url, after it has been changed, with this code:
<script>
var x=1;
function changeLink()
{
x=x+1;
var y="http://example.com/basicone/image"+x+".html";
document.getElementById('iframe-a').src=y;
alert(document.getElementById('iframe-a').src);
}
</script>
<iframe id="iframe-a" seamless src="http://example.com/basicone/image1.html" height="450" width="1000" scrolling="no"></iframe>
<button id="button" onclick="changeLink()">Next</button>

Refreshing a div creates a duplicate in struts2

I'm new to Javascript so please bear with me.
I have code which refreshes the div of the parent window when the child window closes. The problem is when content of the div refreshes it creates a duplicate, and I don't know why. My code is below.
Inside the head tag of the parent I'm doing this:
<html>
<head>
<script language="javascript" type="text/javascript">
function ParentWindowFunction()
{
$(".mydiv").load("Welcome.jsp");
return false;
}
</script>
</head>
<body>
<div class="mydiv">
<img src="<s:property value="#session.img"/>" id="img" width="200" height="150" />
</div>
</body>
</html>
Inside child window's head tag I have:
<html>
<head>
<script type="text/javascript">
function refreshAndClose()
{
window.opener.ParentWindowFunction();
window.close();
}
</script>
</head>
<body onbeforeunload="refreshAndClose();">
...
</body>
</html>
i found solution for my problem instead of refreshing div i am reloading entire page like this
<script>
function winopen()
{
chatterinfo = window.open('fileupload.jsp',"chatterwin","scrollbars=no,resizable=yes, width=400, height=300, location=no, toolbar=no, status=no");
chatterinfo.focus();
}
</script>
<script language="javascript" type="text/javascript">
function ParentWindowFunction()
{
window.location="Login.action?uname=${uname}&&pass=${pass}";
}
</script>
</head>
<body>
<div class="mydiv">
<img src="<s:property value="#session.img"/>" id="img" width="200" height="150" />
</div>
</body>
</html>
Inside child window's head tag I have:
<html>
<head>
<script type="text/javascript">
function refreshAndClose()
{
window.opener.ParentWindowFunction();
window.close();
}
</script>
</head>
<body >
<input type=button onclick="refreshAndClose();" />
</body>
</html>

Categories