index.html
<html>
<head>
<title>Index</title>
</head>
<body>
<p>some text</p>
link
<iframe name="f"></iframe>
</body>
</html>
Is it possible to hide the text inside p-tag once the target website is fully loaded inside the iframe?
Try this link for solution.
Modified link as per #Barmar comments.
HTML
<p id="removeText"> some text</p>
<iframe src="demo_iframe.htm" name="iframe_a" id="iframe_a"></iframe>
W3Schools.com
JS
document.getElementById('iframe_a').onload = function() {
document.getElementById('removeText').innerHTML = '';
}
Related
I am trying to hide a section using a tag (#masthead) inside the iframe on https://e-hasan.com/blog/
I tried many codes, but they do not work on PHP-based websites only work on a static HTML website.
I tried this code but not working. It's only working on one static HTML page. I would like to hide the header of the website.
<html lang="en">
<head>
<title>Hide element inside iframe using javascript</title>
</head>
<body>
<p>Click on the <b>Hide Div</b> button to hide the div element inside the iframe.</p>
<button onclick="hideDiv()">Hide Div</button>
<iframe id="iframe-id" src="https://e-hasan.com/blog/" style="height:100%;width:100%"> </iframe>
<script>
function hideDiv() {
var myIframe = document.getElementById("iframe-id");
var divElement = myIframe.contentWindow.document.querySelector("#masthead");
divElement.style.display = "none";
}
</script>
</body>
</html>
I want to add css properties in a iframe div by using jQuery but it's not working.
Html Code:-
<html>
<body>
<iframe id='iframeId' src='api.php?abc=xyz..'>
<html>
<head></head>
<body>
<div class='change-class'> //require <div class='change-class' style='background-color:black'>
.......
</div>
</body>
</html>
</iframe>
</body>
</html>
JS Code:-
I try below code but doesn't get any result.
$('.change-class').css('background-color','black');
$("#iframeId").contents().find(".change-class").attr('style','background-color=black');
For this the iframe src document should also have to be on same domain to access iframe's dom nodes, if you have both pages on same domain then you can do this:
$("#iframeId").contents().find(".change-class").css('background-color', 'black');
You can find use like this way:
var iframe = $('iframe');
$(".change-class", iframe.contents()).addClass('border');
For certain reasons, I have it so a div will contain code that I want an iframe to load:
<div id="MyDiv">
<html>
<head>
</head>
<body>
<h1>Hi</h1>
</body>
</html>
</div>
<iframe id="MyFrame"></iframe>
My Javascript to get the text (the code) within the div above:
var DCode = document.getElementById("MyDiv").innerHTML;
My Jquery to add the code to my iframe:
$('#MyFrame').contents().find('html').append(DCode);
When I view the document in my iframe, I see the html from the div inside but wrapped with double quotes and in the body. How can I get it to display as a page?
One thing I realized when using an alert box to display the code, the "<" are shown as the escape characters: & l t ;
Few things to consider -
1) Contents in MyDiv - <head> and <body> tags starts but do not end.
2) var "DCode" holds innerHTML but jquery appends "DString".. Variables are different.
Is it a typo in asking the question?
I could not reproduce your issue. Following code works fine for me -
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
function copy()
{
var DCode = document.getElementById("MyDiv").innerHTML;
$('#MyFrame').contents().find('html').append(DCode);
}
</script>
</head>
<body onload="copy();">
<div id="MyDiv">
<html>
<head></head>
<body>
<h1>Hi</h1>
Div body
</body>
</html>
</div>
<iframe id="MyFrame"></iframe>
</body>
</html>
I have a forum which is generated by my CMS. I have no control over this code. Within this code I need to insert HTML. I have read other post similar to this one but those all involve using <textarea> on forms. My code is a bit different.
Here is the generated code:
<iframe id="re_contentIframe">
<html>
<body>
</body>
</html>
</iframe>
As a person types it automatically inserts the code into the <body> tag.
IE:
<iframe id="re_contentIframe">
<html>
<body>
<p>As a person types it adds the <p> tags.</p>
</body>
</html>
</iframe>
I have a function that inserts HTML dynamically when a person performs an action such as uploading a file. Currently that function appends the dynamic content before the closing <body> tag. What I want it to do is insert the HTML where the cursor last was within the the iFrame's body tag.
Here is a visual example:
<iframe id="re_contentIframe">
<html>
<body>
<p>Forum content is typed here.</p>
<p>Content.</p>
<p>Content.</p>
<p><!-- Last place the cursor was located is here! --></p>
<p>More forum content.</p>
</body>
</html>
</iframe>
In looking at the above code I want the HTML inserted exactly at the location the cursor was. In this example it was the second to last <p> tag BUT this won't always be the same exact place.
Is it possible to do this and how?
In other words:
[Find Cursor Position] function() {
//My code to insert HTML
});
EDIT
My CMS generates the code for the forum post. When rendered it appears as this:
The part that has my name in it is the area I can edit and type in. The area I can type is generated by my CMS and looks like this:
<iframe id="re_contentIframe">
<html>
<body>
Lynda =>
</body>
</html>
</iframe>
As I type the HTML changes to this:
<iframe id="re_contentIframe">
<html>
<body>
<p>What I type is wrapped in <p> tags by the forum code.</p>
<p>New Paragraph and so on...</p>
Lynda =>
</body>
</html>
</iframe>
What I need to do is at the very last place the cursor was located in the body of this iFrame I need to insert code upon an action that is triggered by a JS function.
How to move div to before tag end body </body>. I'm using openx, I cannot change div content, because the content owned by others. I just put code javascript from openx in order to get banner I put the code after tag <body> before anyting tag in content.
And my problem is, when I put javascript from openx to generate banner I get two div parallel, which the banner in <div id="div1"> and <div id="div2"> there are in below tag <body>, I want to <div id="div1"> after tag start body <body> above anyting tag in content. And <div id="div2"> in before tag end body </body> after anyting tag.
This is I get html from openx, as below:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="div1"><img src="blablabla" /></div>
<div id="div2"><img src="blablabla" /></div>
Here is content other div id or div class,
I not define example insert after div id footer
Because this is content owned by others.
This is justexample content.
</body>
</html>
and I want to transform to as below:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="div1"><img src="blablabla" /></div>
Here is content other div id or div class,
I not define, example insert after div id footer
Because this is content owned by others.
This is justexample content.
<div id="div2"><img src="blablabla" /></div>
</body>
</html>
Because I want to put banner one above content and banner two to below content. I don't want to use CSS position: fixed.
So, possible to move tag div to before tag end body?
If possible, please help me code javascript to do it.
Thanks.
Plain simple javascript:
document.body.appendChild(document.getElementById('div2'));
To move the node you just use appendChild method.
And the demo http://jsfiddle.net/6GsbB/
Yes. You can do this way, but you need jQuery.
a = $("#div2").clone();
$("#div2").remove();
$("body").append(a);
Fiddle: http://jsfiddle.net/praveenscience/zc8Ze/
Plain JavaScript method.
var a = document.getElementById("div2");
document.body.appendChild(a);
Fiddle: http://jsfiddle.net/praveenscience/zc8Ze/1/
From the comments, this can be made in a better efficient way, given by dfsq:
document.body.appendChild(document.getElementById('div2'));