CODEWITHSUNDEEP
javascripthyperlink
Stan
Stan

Reputation: 139

Disable hyperlinks with javascript in a iframe script

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!

Upvotes: 4

Views: 270

Answers (2)

DieVeenman
DieVeenman

Reputation: 457

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.

Upvotes: 1

codebox
codebox

Reputation: 20254

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.

Upvotes: 1

Related Questions