3814

javascript: is it possible to target div of another file?

Question:

Let me explain the purpose of this. I'm using some CMS and I'm trying to customize it with php scripts of my own that I embedded to the home page with IFRAME. My php script gives back some links which I would like to open outside that IFRAME - as a part of some other CMS block on the homepage. The idea is to target (from my php script) the div of that CMS block which is already showing some data. Is that possible?

Answer1:

If you need to access <div> or any other element of parent window from its child iframe

USE:

var elem=window.parent.document.getElementById('target');

inside <script> tag of iframe's document.

ex.

file: index.html (Give any name).

<html> <body> <div id="div_to_use_from_parent">Blah!</div> <iframe src="xyz.php" width="xx" height="xx"></iframe> </body> </html>

file: xyz.php (same as src of iframe)

<?php echo<<<html <html> <head> <script type="text/javascript"> function do_blah(){ var elem=window.parent.document.getElementById('div_to_use_from_parent'); elem.innerHTML="iframe changed My Content!"; } </script> </head> <body onLoad="do_blah();"> This is iframe </body> </html> html; ?>

OR

if you need to access element in iframe from parent window

USE:

var iframe = document.getElementById('idOfIframe'); var frame = iframe.contentDocument || iframe.contentWindow.document; var yourDiv= frame.getElementById('div_you_want');

inside <script> tag of parent window's document.

ex.

file: index.html (Give any name).

<html> <head> <script type="text/javascript"> window.onload=function(){ var iframe = document.getElementById('idOfIframe'); var frame = iframe.contentDocument || iframe.contentWindow.document; var elem= frame.getElementById('div_from_iframe'); elem.innerHTML+="<br /> And Parent window added this!"; }; </script> </head> <body> <div id="div_to_use_from_parent">Blah!</div> <iframe src="xyz.php" width="xx" height="xx"></iframe> </body> </html>

file: xyz.php (same as src of iframe)

<?php echo<<<html <html> <body> <div id="div_from_iframe"> This div from iframe</div> </body> </html> html; ?>

parent window is the one in which original html(index.html) document along with your iframe(xyz.php) resides.

Hope it helps :-)!

Answer2:

var iframe = document.getElementById('idOfIframe'); var frame = iframe.contentDocument || iframe.contentWindow.document; var yourDiv= frame.getElementById('div_you_want');

Answer3:

From the page running inside the <iframe> you can refer to the parent page as window.parent, and perform actions as you normally would.

parent.document.getElementById('target_div').innerHTML = 'New content.';

Note JavaScript's cross-domain restrictions apply. You can only do that if both pages belong to the same domain.

In case of links, you can include to your <a> tags the attribute target="_parent", or set it as base target to apply to all links.

<head> ... <base target="_parent"> </head>

You can also target a link to another iframe, all you have to do is set a name="iframe_name" to it and set target="iframe_name" to all links that should open in that area.

Recommend

  • I'm moving from C to C++ and I don't get this creation of a class
  • how to pass class attribute and value to markdown syntax
  • Copying rows in a database when rows have children
  • Receive list of elements in their visual order
  • Passing information to server-side function in a Google Docs Add On
  • How can I sync the html/session used between Django's 'Client' and Selenium's we
  • Javascript Array, Object, Date not defined
  • Making Google Visualization - Annotation Chart to work in GWT
  • Why doesnt this Java loop in a thread work?
  • Is there a way to dynamically embed PDF Files in a JSP pulled from the file system?
  • Update Google Maps traffic layer without page reloading
  • Web.config system.webserver errors
  • Force show.bind execution
  • Button click event not firing in jQuery
  • Detect when Facebook like button is clicked
  • Chart.js Multiple dataset
  • How do I get HTML corresponding to current DOM tree?
  • JQuery Internet Explorer and ajaxstop
  • JSON response opens as a file, but I can't access it with JavaScript
  • Disable Enter in editText android
  • Alert pop up with LWUIT
  • Get one-time binding to work for ng-if
  • Disabling Alt-F4 on a Win Forms NotifyIcon
  • Xamarin Forms - UWP Fonts
  • PHPUnit_Framework_TestCase class is not available. Fix… - Makegood , Eclipse
  • Volley JsonObjectRequest send headers in GET Request
  • Change an a tag attribute in JavaScript based on screen width
  • Importing jscolor library in angular 2
  • Rearranging Cells in UITableView Bug & Saving Changes
  • Run Powershell script from inside other Powershell script with dynamic redirection to file
  • AngularJs get employee from factory
  • Proper way to use connect-multiparty with express.js?
  • Load html files in TinyMce
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • How to set the response of a form post action to a iframe source?
  • coudnt use logback because of log4j
  • How to CLICK on IE download dialog box i.e.(Open, Save, Save As…)
  • Linking SubReports Without LinkChild/LinkMaster
  • Easiest way to encapsulate a HTML5 webpage into an android app?
  • Conditional In-Line CSS for IE and Others?