How to hide any section div inside iframe - javascript

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>

Related

Modify HTML DOM based on iframe using javascript

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 = '';
}

Change an iframe's src from another html file?

Well, I have my radio elements that update an iFrame with js code; and that works fine.
Then I have my button below that creates an iFrame in a HTML Division that contains a bunch o' buttons in a list, my aim is to click one of these buttons in the iFrame then have that button to update the above iFrame (the one controlled by the radio's).
How is this possible, can anyone help me? Thanks in advance.
Note: I've tried using <link rel="import" href="parentpage.html"> to import its ID's (if it does that?) then tried using JS to update it that way, to no avail.
What it looks like (layout wise)!
A simple way to do so is to get the button inside the iframe and set the event onclick like this
$(document.getElementById('iFrame2').contentWindow.document.getElementById("iFrame2Button")).click
(function ()
{
$("#iFrame1").attr('src','tests.php');
})
Assuming all the frames are in the same domain, this can be done like this:
<html>
<head>
<title>Main Page</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
var change_iframe1_src = function(new_src) {
$("#iframe1").attr('src', new_src);
}
</script>
</head>
<body>
<!-- frame for which we will change src attribute -->
<iframe id="iframe1" src="" width="400" height="200" border="1"></iframe>
<!-- frame which includes your iframe2 with the buttons-->
<iframe src="iframe.html" width="200" height="200" border="1"></iframe>
</body>
</html>
Now in the iframe2 file attach a click handler for your buttons that should change the src attribute of the iframe1 by calling a function defined in the main page.
Example:
<html>
<head>
<title>iFrame 2</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("button").click(function(e) {
e.preventDefault();
// call function in a parent frame - IMPORTANT LINE BELOW :)
parent.window.change_iframe1_src(this.rel);
})
})
</script>
</head>
<body>
<button rel="iframe3.html">Change iframe src to iframe3.html</button>
<button rel="iframe4.html">Change iframe src to iframe4.html</button>
</body>
The links in the iframe 2 page call the function which is defined in the parent window (the main page / the window which embeded the iframe2 page itself). That function (change_iframe1_src in this example) takes one argument which is a new url.
The src attribute of the frame #iframe1 (your first frame) will be changed to this url.
Again, this works as long as all the frames are in the same domain.
Hope it helped :) Source

How to interact with <body> tag from iFrame

Say I have a code like this :
<html>
<head>
</head>
<body>
<iframe>
<script>
//execute javascript here to append another piece of javascript in parent body tag
</script>
</iframe>
</body>
</html>
Now I want to execute some javascript in that iFrame to append another piece of javascript in parent body tag.
If the iframe belongs to the same domain of the main window, you can simply do
top.functionToBeCalled(argument);

Click a button and it should load the content into the main content area

I have create 3 buttons on the left menu for "Cars," "Music," and "Games"
When the user clicks one, it should load the appropriate contents into a DIV
in the main content area. Each button should replace the contents of anything
previously displayed in the div. I created my buttons, but I do not know how to
load the content into the main content div or how to replace the previous content.
Can you help please?
Use jquery load function
<!DOCTYPE HTML>
<html>
<head>
<title>Title of the document</title>
<script src="../js/jquery.js"></script>
<script>
function load(url){
$('#content').load(url);
}
</script>
</head>
<body>
<button onclick='load("url1");'>Content 1</button>
<button onclick='load("url2");'>Content 2</button>
<div id='content'></div>
</body>
UPDATE Ok lets clarify it a bit.
The code above uses jQuery lib. Look here for more info about load function.
If you cannot or dont want to use jQuery look here for JS solution.
If you want to use only static content then you have two another options:
//1: if the new content is only small portion of info text
<script>
function load(newContent){
document.getElementById('content').innerHTML = newContent;
}
</script>
<button onclick='load("some text 1");'>Content1</button>
<button onclick='load("another text 2");'>Content2</button>
<div id='content'></div>
//2: put content directly to your page the several DIVs and hide them
<script>
function show(index){
var n=2; // number of DIVs
//show desired content and hide any others
for(var i=1; i<=n; i++){
document.getElementById('content'+i).style.display = i == index ? 'block' : 'none';
}
}
</script>
<button onclick='show(1);'>Content 1</button>
<button onclick='show(2);'>Content 2</button>
<div id='content1'></div>
<div id='content2' style='display:none;'></div>

Make an external css file only apply to some HTML

I am developing a website updater. My idea is to have certain HTML elements be part of the class updatable. I will then change each element with that class to a textarea element. That way it can be updated.
I am dividing the updater.html page into 2 areas; the left side a select element but the right side shows some HTML from the webpage I am updating. I want all the html on the right side to be affected by a specific css style sheet(the style sheet of the webpage I am updating). How can I do that?
Because the style sheet is external, I dont want to open the style sheet, read it into memory(is this possible in javascript) then insert it into the iframe that contains the updatable HTML.
<html>
<head>
</head>
<body>
<table>
<tr>
<td class="updaterSection">
<select>
<option> home </option>
...
</select>
</td>
<td class="updatableWebpage">
<!-- I want all the HTML in this div to be affected by the external css stlyle sheet -->
<iframe src="/css/specStyle.css">
<p> uneditable stuff </p>
<textarea> editable stuff </textarea>
</iframe>
</td>
</tr>
</table>
</body>
</html>
As far as i konw, this is not how you use an iframe,
The inside of the <iframe> will be replaced by the page put in the src.
The code you posted is just going to display the css page on your webpage. (a simple example using you code: http://jsfiddle.net/W5ggT/ )
So either you put all the html that is inside your iframe into a new html page which contains a link to the special stylesheet in its header.
Or you use some ajax to refresh that, but I'm not sure to fully understand what you want.
You can manipulate the DOM of the html webpage inside your iframe using javascript.
That is only possible if it is in the same domain.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Iframe manipulation</title>
<script type='text/javascript'>
window.onload = function () {
var iframe = document.getElementById('iframe');
// cross browser solution for handling iframe
var contentProp = (iframe.contentWindow)?iframe.contentWindow.document:iframe.contentDocument;
var head = contentProp.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.rel = "stylesheet";
link.type = "text/css";
link.href = "/stylesheet/css.css"; // the new stylesheet to add to iframe
head.appendChild(link);// adds stylesheet to iframe
});
</script>
</head>
<body>
<iframe id='iframe' src='test2.html'></iframe>
</body>
</html>
add external.css your css file in the head section (within tag).
<html>
<head>
<link rel="stylesheet" type="text/css" href="path to the css file">
</head>
<body> </body>
</html>
give a different class name to the tag that you want to style. But the style in your external.css file.
Hope it helps.

Categories