Disable hyperlinks with javascript in a iframe script

Question

i load content with a script, the script will generate a iframe.

var egmWidgetUrl = '//www.domain.com/widget2';

var referer = '';
if(location.host){
 referer = encodeURIComponent(location.host);
}else{
 referer = 'unknown';
}


fussballdeWidgetAPI = function() {
 var D = new Object();
 var C = new Object();

 D.showWidget = function(E, K) {
  if (K != undefined && K != null && K != "" && E != undefined && E != null && E != "") {
   if (document.getElementById(E)) {
    if (K != "") {
     var src = egmWidgetUrl + "/-"
         + "/schluessel/" + K
      + "/target/" + E
      + "/caller/" + referer;
     createIFrame(E, src);
    }
   } else {
    alert("Der angegebene DIV mit der ID " + E
      + " zur Ausgabe existiert nicht.")
   }
  }
 };

 window.addEventListener("message", receiveMessage, false);
 function receiveMessage(event)
 {
    if (event.data.type === 'setHeight'){
      document.querySelectorAll('#' + event.data.container + ' iframe')[0].setAttribute('height', event.data.value + 'px');
    }
    if (event.data.type === 'setWidth'){
      document.querySelectorAll('#' + event.data.container + ' iframe')[0].setAttribute('width', event.data.value + 'px');
    }
 }
 return D
};


function createIFrame(parentId, src){
 var parent = document.getElementById(parentId);
 var iframe = document.createElement('iframe');
 iframe.frameBorder=0;
 iframe.setAttribute("src", src);
 iframe.setAttribute("scrolling", "no");
 iframe.setAttribute("width", "300px");
 iframe.setAttribute("height", "500px");
 iframe.setAttribute("style", "border: 1px solid #CECECE;");
 parent.innerHTML="";
 parent.appendChild(iframe);
}

<script type="text/javascript"
  src="style/fussball_de.js">
 </script>

The call for the conetent is:

<script type="text/javascript">
    new fussballdeWidgetAPI().showWidget('widget1', '01PD126RC8000000Vxxxxxxxxxx');
</script>

In the generated iframe will be hyperlinks, i want to disable the hyperlinks, e.g. with "#". I tried different ways, but nothing helps.

$("iframe").load(function() {
$("iframe").contents().find("a").each(function(index) {
    $(this).on("click", function(event) {
        event.preventDefault();
        event.stopPropagation();
    });
});

Is it possible to disable the hyperlinks in that script?

Thank you!

If the page the iframe is loading is on a different domain than the page loading it than no you cannot do this as it is restricted by cross-domain policy — Patrick Evans, Aug 17 '15 at 14:03

codebox · Answer 1 · 2015-08-17T14:17:17.547

1

If the contents of the iframe are loaded from a different domain to the main page then you won't be able to access its contents via JavaScript for security reasons.

If you control the content that is being loaded into the iframe you can use some JavaScript code within the loaded page to detect whether it is running within an iframe and disable the links.

edited Aug 17 '15 at 14:17

answered Aug 17 '15 at 14:03

codebox

19,927
9
63
81

Yes, thats true, but cant I use another script to disable the links in the iframe? – Stan Aug 17 '15 at 14:10

DieVeenman · Accepted Answer · 2015-08-17T14:21:41.703

1

There's no other way to do it besides putting a transparent image over the iframe with CSS.

EDIT:

Type the code <div id="IframeWrapper" style="position: relative;"> above your <iframe> tag in your HTML document.

Type the code <div id="iframeBlocker" style="position: absolute; top: 0; left: 0; width: [width]px; height: [height]px"></div> below the line you typed in Step 1. Replace [width] and [height] with the width and height of your iframe.

Type a closing div tag </div> below your iframe tag.

edited Aug 17 '15 at 14:21

answered Aug 17 '15 at 14:12

DieVeenman

457
1
3
18

Ok, sounds interesting. Could you pls give me more instructions? – Stan Aug 17 '15 at 14:16
Tank you! Normally it should work, but the iframe will be loaded over the script, i dont have the iframe- tags. If i put the lines over the script it will be ignored. – Stan Aug 17 '15 at 14:52
If you run the page can you see where in the HTML the iFrame is "inserted", you could place the tags around it or make sure the iFrame is loaded into a specified tag which is surrounded by the
– DieVeenman Aug 17 '15 at 14:55
Yes DieVeenman, thats it! Nice!! Do you have a solution for the css comes with the script, too? I want to remove the header, display:none; does not work. – Stan Aug 17 '15 at 15:25
As far as I know you can't edit the CSS from a iframe that's loaded externally unto your page – DieVeenman Aug 17 '15 at 15:28

Disable hyperlinks with javascript in a iframe script

2 Answers2