How to remove any div in iframe - javascript

Hi Please tell me how can we remove any div in iframe for example my code is :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<iframe src="http://stayupdate.net" width="100%" height="800">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
I want to remove "creditline" div or its text
<div id="creditline">
<span class=".alignleft">
</span>Designed By
Real Web Maker
</div>

You can change only if you have access(file) to that page..Otherwise its not possible to change the content of other's page.And it should be.
Don't no about your requirement but..But you can do a trick.
Create a same size div,change the content according to you requirement.
and by js or jquery put it exactly over iframe div.
Is not recommended at all,and its not reliable too.

I suppose you want to add script to your page, which removes a div tag inside the iframe. This is only possible if the page shown by the iframe (http://stayupdate.net) has a provision to do that. If you can modify the inner page, then you could add an event listener, which accepts an external command to remove a tag. The outer page can then send that command using postMessage, as described here. If the outer and inner pages are in the same domain, you can use a simple function call as described here.

Related

Running <script> inside specific <div> only

I'm trying to run a script within a specific div only. With my current code, the script affects the image outside of the div as well. I'm using this code on wordpress within a html widget and when I insert the script code, it effects the entire page. I only want it to apply the specific html widget. This is also the reason I want to insert the script within a div, as I want to avoid adding the script to the actual web page (if possible).
Any help or work around would be greatly appreicated.
<html>
<head></head>
<body>
<div>
<script async defer data-pin-hover="true" data-pin-tall="true" src="//assets.pinterest.com/js/pinit.js">
</script>
<img src="https://i.imgur.com/I63emp4.jpg" height="160">
</div>
<img src="https://imgur.com/0VWBThm.jpg" height="160">
</body>
</html>

Limiting JavaScript Execution

Is there a way to prevent a script from executing outside of an element without using a frame or iframe? I am not talking about the CSP because it is all within the same domain. For example:
<!doctype html>
<html>
<body>
<div id="internal_application_frame">
<div>
</div>
<script> /* internal domain script */
</script>
</div>
</body>
</html>
I want to limit the script inside the "internal_application_frame" to see everything inside of it, however, it should not be able to access anything outside that div. So no access to the window object or anything. Is there a way to do that? If you need more clarification, I will try to word in differently. Thanks in advance.

How to clear an iframe of all content?

I'm using an iframe and dynmically loading its content from an API. I'm trying to find a way to clear the iframe of all of it's content without changeing the src attribute. E.G.
<iframe class="bla" src="//blabla">
<html>
Lots of HTML rendered
</html>
</iframe>
Needs to become:
<iframe class="bla" src="//blabla"></iframe>
Very important that I keep all of the iframe attributes.
Is there a way to do this with javascript or jquery?
See Oscar Jara's answer to a similar question here:
https://stackoverflow.com/a/11658546/4669143
If the iframe origin in the same as the enclosing site's origin, you should be able to do it without violating the cross-domain policy. Otherwise, it won't work.
He includes a working fiddle.

How do I load a webpage inside a div using Javascript without IFRAME and JQuery?

I need to load an external webpage into a div. I don't want to use an iFrame. And I want this done with plain Javascript. I'm not sure how to go about it.
With difficulty…
Use Ajax (e.g. via XMLHttpRequest) to get the page. Since it is external, you will need to bypass the same origin policy.
Once you have the page, extract the relevant parts of it (probably the children of the body element) and add that to your existing DOM.
You'll need to account for differing stylesheets between your site and the external one, for relative URIs (to resources on the external site that aren't on yours), and for any scripts in the remote content.
Whichever method you have, in js, try this instead : $('#myid').load('mylink.com')
I know only this in js.
You don't even need javascript-
but the same restrictions apply as for iframe inclusion of different domains.
<!doctype html>
<html lang="en">
<head>
<meta charset= "utf-8">
<title>test page</title>
</head>
<body>
<div>
<object type="text/html" data="http://validator.w3.org/" width="800px" height="600px" style="overflow:auto;border:5px ridge blue">
</object></div>
</div>
</body>
</html>
You should be able to load html pages within a page using the jQuery.get() method. I'm using this method for two websites for my clients, where the individual pages are different sections of the site.
I'm unsure of the behavior you may encounter if you attempt to use this method loading full HTML pages that include header information and the body tag. I recommend using it to load HTML snippets.
jQuery.get()

Javascript in Iframe within Div not working

I have a webpage that I would like to embed within another page. On the page that is to be embedded I have some window.onload javascript that will load a PDF document via the embed tag. If I use just the Iframe tag like this:
<iframe name="content" id="iframe" allowtransparency="true" src="Pages/menu.html" scrolling="no"></iframe>
The Javascript will run just fine. But I am trying to create a background and border for the iframe so I have wrapped the iframe in a div like so:
<div id="content" class="border">
<iframe name="content" id="iframe" allowtransparency="true" src="Pages/menu.html" scrolling="no"></iframe>
</div>
As soon as I do it this way the javascript will not run. Here is the screenshot of what I am trying to do. I do not believe that the styling that is present on the div ( curved borders, gradient, etc is possible on an iframe)
I am using PDFObject to generate the PDF on the page. The iframe is also loading the company's external website in the content section on demand and this is what they want so unfortunately i have to use iframes. This has to be done without using anything except javascript as well otherwise I would just use php.
I have to post the SCREENSHOT outside of this site on photobucket due to restritions sorry:
http://i721.photobucket.com/albums/ww217/the_t3rminat0r/Capture-2.png
It looks margin property in div style (or border class in your example) causes the problem.

Categories

Resources