Databases
StackOverflow2013
Postsdbo
POChange background-color of elements within an iframe on hover
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POChange background-color of elements within an iframe on hover
    text
    copied!<p>How do I change the <code>background-color</code> of elements in an <code>&lt;iframe&gt;</code>? The <code>&lt;iframe&gt;</code> is in my domain. Here is the complete code (HTML, PHP and jQuery):</p> <pre><code>&lt;?php error_reporting(E_ALL ^ E_NOTICE); $url = $_GET['url']; if( ! empty($url)) { $data = file_get_contents($url); $data = str_replace('&lt;head&gt;', '&lt;head&gt;&lt;base href="'.$url.'" /&gt;&lt;/base&gt;', $data); $data = preg_replace('#&lt;script(.*?)&gt;(.*?)&lt;/script&gt;#is', '', $data); $data = preg_replace('#&lt;iframe(.*?)&gt;&lt;/iframe&gt;#is', '', $data); $data .= ' &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt; &lt;script&gt; $("div").each(function(i){ if($(this).css("position") == "fixed") $(this).css("display", "none"); }); &lt;/script&gt; ' ; die($data); } ?&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt; &lt;head&gt; &lt;meta http-equiv="content-type" content="text/html; charset=utf-8" /&gt; &lt;meta name="author" content="Webarto" /&gt; &lt;title&gt;AdriaMart&lt;/title&gt; &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt; //function for xpath location &lt;script type="text/javascript"&gt; function getXPath(node, path) { path = path || []; if(node.parentNode) { path = getXPath(node.parentNode, path); } if(node.previousSibling) { var count = 1; var sibling = node.previousSibling do { if(sibling.nodeType == 1 &amp;&amp; sibling.nodeName == node.nodeName) {count++;} sibling = sibling.previousSibling; } while(sibling); if(count == 1) {count = null;} } else if(node.nextSibling) { var sibling = node.nextSibling; do { if(sibling.nodeType == 1 &amp;&amp; sibling.nodeName == node.nodeName) { var count = 1; sibling = null; } else { var count = null; sibling = sibling.previousSibling; } } while(sibling); } if(node.nodeType == 1) { path.push(node.nodeName.toLowerCase() + (node.id ? "[@id='"+node.id+"']" : count &gt; 0 ? "["+count+"]" : '')); } return path; }; &lt;/script&gt; //function to get xpath location and write in textfield in focus &lt;script&gt; $(function () { var selectedtextbox; $('input[name="myinput"]').focus(function(){selectedtextbox=$(this);}); $('#iframe').load(function(){ $('body *', $(this).contents()).click(function (event) { event.stopPropagation(); event.preventDefault(); var xpath = getXPath(this); selectedtextbox.val(xpath) }); }); }); &lt;/script&gt; &lt;style type="text/css"&gt; &lt;!-- iframe{width:100%;height:400px;} --&gt; &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;!-- ... --&gt; &lt;input id="iframe_url" name="" type="text" /&gt; &lt;input id="iframe_button" name="" type="button" /&gt; &lt;iframe id="iframe" src="?url=http://kupime.com"&gt;&lt;/iframe&gt; &lt;p&gt; &lt;script type="text/javascript"&gt; document.getElementById('iframe_button').onclick = function () { document.getElementById('iframe').src = '?url=' + document.getElementById('iframe_url').value; }; &lt;/script&gt; &lt;!-- ... --&gt; &lt;/p&gt; &lt;p&gt;Please click on title &lt;input id="" name="myinput" type="text" value=""&gt; &lt;/p&gt; &lt;p&gt;Please click on Image &lt;input id="" name="myinput" type="text" value=""&gt; &lt;/p&gt; &lt;p&gt;Please click on price &lt;input id="" name="myinput" type="text" value=""&gt; &lt;/p&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload